React: testes, performance, como e quando usar |

[@dieegosf]

Galera, desculpem pelo meu áudio, o cabeção aqui usou o microfone da webcam na gravação! Hahahaha, bom vídeo! 💜

[@birobirobiro]

Tá perdoado 💜

[@IsaacBatistapns]

clássico

[@_Gohara]

Nem atrapalhou, muito show o conteúdo! 🚀👨🏻‍🚀

[@rocketseat]

Quem nunca!? 👀 Ta perdoado! 💜

[@jeffersonfelixdev]

@@rocketseat Eu já ia perguntar, o que aconteceu com o audio top do Diego? hehe

[@gabrielcostamusicc]

Diego é brabo demais

[@rocketseat]

Diego é fera! 💜

[@PresleyMcquade]

Parabéns pela aula! Excelente! Pergunta #PR Gostei do papo sobre o react.memo(), mas fiquei na dúvida sobre algo relacionado. Quando se está trabalhando com renderização de listas que passam de 10k itens, como gerenciar eficiência na renderização? Participei de um projeto em que havia uma lista que, renderizada, passava dos 20k, mas o Browser travou e o processador foi a miilll! Vi algumas soluções que a próprio documentação do react recomendou, como react-window ou react-virtualized, mas achei bem limitado, como a perda de algumas funções básicas do navegador, como campo de busca. Como seria uma solução ideal para estes casos? Ou o ideal é abandonar o React? kkkk

[@adriel_borges]

pergunta pro #PR, no Next criamos rotas apenas "colocando " arquivos na pasta page, eis minha pergunta: como, então, fazemos para essa pagina ser restrita igual como é possível fazer com o React-Router-Dom apenas com o React.js ?

[@Oculterous]

É possível fazer quase da mesma forma ou até mesmo por cookies, tbm utilizando contexto se necessário

[@VictorCostaDev]

É possível fazendo algo como: const DashboardComponent: React.FC = () => { // aqui vai o conteúdo do componente de forma normal. } //Ps: esse PrivatRoute é um HoC que você vai implementar igual faria usando o react-router-dom por exemplo export default PrivateRoute(DashboardComponent) Mas quero ver se o pessoal da Rocket indica outras formas de fazer isso

[@rocketseat]

Faaaala, Adriel! 🚀 Normalmente lidamos com HOC's, que é um conceito do React onde conseguimos encapsular um componente com uma função/outro componente e aplicar regras de negócio adicionais, nesse caso a autenticação, e as rotas que queremos ter privadas na nossa aplicação! 😉 Vou te deixar um link pra você dar uma olhadinha: pt-br.reactjs.org/docs/higher-order-components.html 💜 😍

[@brunoperes7]

Ficou muito bom essa papo !! Um dos melhores PR

[@rocketseat]

Wooow! 💜

[@ProgramadorLhama]

De todos os videos da Rocket que ja vi, consigo falar de boca cheia: Esse é o melhor (minha opinião)

[@rocketseat]

Wooow! Sério, Sr Lhama!? 💜 🦙 Conta pra gente, o que te fez pensar isso!? 😍

[@ProgramadorLhama]

@@rocketseat de todos os PRs, acho que vcs conseguiram responder as perguntas mais necessárias dentro do mundo React (e Next). Abordou teste, performance, aprofundamento.... Muito bom 👍

[@rocketseat]

Que show! 😍 💜

[@danielvinicius4906]

Diego fala sobre Error Bounderies

[@rocketseat]

Faaaala, Daniel! Valeu pela sugestão! 💜 🚀

[@TioPew]

Diego você não consegue criar seu próprio profile do CRA?

[@marcosbaiadori5107]

Uma técnica que eu uso pra ver a renderizações, eu printo o nome do componente, logo abaixo da função e crio uma tag pra rastreio e deste print e assim consigo comentar ou descontentar com o próprio replace do VS code.

[@rocketseat]

Woow! Valeu por compartilhar essa técnica, Marcos! 💜 😍

[@JosuFeitosa]

Minha pergunta foi citada 😱 Que honra! Valeu, Diegão! o/

[@rocketseat]

Fooooooi! 💜 Valeu pela participação, Josué! 😉

[@YoutuberMaskarado]

Pessoal, vcs planejam fazer algum cursos focados em Angular, ou alguma trilha?

[@VictorCostaDev]

#PR quais outras formas de salvar estado vocês recomendam além de cookies? Isso falando de uma aplicação NextJS. Se puderem falar também sobre Error Bounderies/Portals seria massa.

[@rocketseat]

Excelente pergunta, Victor! Valeu pela sugestão! 😍

[@jvzaniolo]

#PR não é pull request! A minha maior dúvida é sobre organização do projeto, estrutura de pastas. Depois que um projeto ganha um tamanho maior, a estrutura de pages/components/hooks/services acaba não servindo mais por ficar milhares de arquivos em poucas páginas.

[@rocketseat]

Faaala, João Vitor! Excelente ponto! 💜 Temos um vídeo em que o Diego aborda um pouco melhor a parte de estrutura de pastas! 😛 Dá uma olhadinha: kzbin.info/www/bejne/jmO1fIWBmdakra8 Espero que fique mais claro pra você! 💜 😉

[@PATODOIDO13]

Fala Dev, qual a diferença entre desenvolvedor, programador e engenheiro de software?

[@rocketseat]

Excelente pergunta, Joneivison! 😉 😍 É um pouco complexo porque na teoria é X e na prática é Y! 😥 Vamos estudar a melhor forma de responder e, provavelmente, trazer em um próximo PR, ta bom!? 💜

[@danilosantoss849]

Curso pra mim compra tá disponivel? Me manda o link

[@rocketseat]

Faaala, Danilo! 🚀 Infelizmente não está mais! As inscrições se encerraram na sexta, 13h! 😢

[@hallexcosta]

Seria interessante ter um vídeo no canal ensinando a debugar um app Expo com react-devtools

[@rocketseat]

Faaaala, Hallex! 💜 Valeu pela sugestão, viu!? 😍

[@zindev]

Seria muito bom se o vídeo tivesse aquelas separações na timeline. Fica ai sugestão. 🙂

[@rocketseat]

Faaala, Alisson! Valeu demais pela sugestão! 💜 😉 Vamos nos atentar a isso nos próximos!

[@adrianoluizbauru]

Cadê o app pra assistir aulas da rocketseat? Não entendo porque a rocket não tem um aplicativo

[@rocketseat]

Faaala, Adriano! 💜 Estamos construindo coisas bem legais esse ano... Quem sabe não temos novidades em breve... 👀 😉

[@galavernag]

31:16 quebrei kkk

[@rocketseat]

Ops... 👀 Quem nunca... 👀 Principalmente na hora de mostrar pro chefe!? HAHAHAHA 😛

[@galavernag]

@@rocketseat kkk

[@aquelecanaldohugo]

Cara, eu discordo completamente sobre a parte de desencorajar o uso de custom hooks para separar a lógica como padrão. Aconselho dar uma olhada nesse artigo: kyleshevlin.com/use-encapsulation/ Mas em resumo, primeiro temos os `useEffect`, que recebem funções anônimas. Sem um comentário, como você sabe o que um efeito faz? Tem que ler o código inteiro do efeito. Você pode até usar uma função que foi atribuída a uma constante, mas daí você perde o recurso do linter de avisar que alguma coisa está faltando no array de dependências. Outra questão é sobre trabalhar num time com diferentes níveis técnicos. Daí o Diego diz que "se estiver muito complexo de entender", vale a pena. Mas o que é "muito complexo"? "muito complexo" pra quem criou o código, "muito complexo" pra quem revisa a PR ou "muito complexo" pra pessoa desenvolvedora júnior que vai mexer naquele código daqui a 6 meses? Se você trabalha num time com pessoas de vários níveis, é bom não deixar a qualidade do código como algo subjetivo. No caso do time onde eu trabalho, antes não tinhamos essa regra e passar a usá-la melhorou muito a qualidade do código. Claro que se o componente em si puder ser dividido em vários com a lógicas minúsculas em cada componente, é o ideal, mas não é sempre o que acontece. Existem componentes que mesmo com pouco conteúdo possuem muita lógica envolvida. Pelo menos no produto que eu trabalho é bem comum.

[@JanderSilva01]

Traz internacionalização no NextJs prós próximos vídeos.

[@rocketseat]

Boooa, Jander! 💜 Sugestão anotadíssima! 😍

[@arthurdebortoli1654]

Pergunta pro próximo #PR: a Rocketseat pretende abordar mais assuntos relacionados a DevOps? A pergunta que fica pro #PR é: como faço deploy de um backend em Node em um servidor prório (Linux ou Windows Server)?. Atualmente, a minha experiência me permite criar uma aplicação com Node + React, porém sinto falta de conhecimento ao fazer deploy em um servidor (não estou falando de serviços de nuvem como Google cloud ou Azure, mas sim servidores próprios).

[@soufleetEnevinel]

Tu pode usar o github action para fazer deploys "automagic", ou manualmente (via ssh, usando um termius da vida ou um putty), que basicamente o que eu faço é: instalar o yarn, node, github e outras paradas que vai precisando (isso é bem relativo) e depois git clone projeto e cd pasta do projeto; yarn install; e por último um "yarn start".

[@rocketseat]

Faaaala, Arthur! Vamos trazer muitas novidades ao longo do ano... Quem sabe... 👀 💜 Ótima pergunta! 😉

[@deyvischarles]

Ai Leon kkkkk 1:03

[@rocketseat]

Hoooje ele apareceu! 😛 💜

[@henriqueomena7686]

Pessoal da rocket só. Uma crítica construtiva está muito ruim esse layout q fizeram pra gravar o vídeo de vc codando eu tenho monitor grande e já eh ruim agora fui assistir no meu celular esquece N da pra ler uma letra aproveitem mais o tamanho da tela quando o Diego fizer screen share plz!!!! Um exemplo tbm dentro do vscode q eh oq mais queremos ver vcs pode por o rosto deles lá bem a direita de resto só sucesso conteúdo extraordinário

[@Katulo14]

Salve Leo........

[@rocketseat]

*Salveeeee* , Matheus! 💜 😛