O ERRO mais comum no React (você já fez isso)
120,553
Published 2022-08-01
Esses estados acabam causando renderizações desnecessárias, que podem ser substituídos facilmente por variáveis calculadas em tempo de execução.
Nesse vídeo eu coloco a mão na massa pra te mostrar como identificar os problemas e corrigi-los.
Bora codar?
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: discord.gg/BccEwvH6Ar
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
All Comments (21)
-
Diego do céu, eu passei EXATAMENTE por isso hoje, e tomei a direção de ir pra uma variável normal, fui questionado e eu mesmo fiquei me questionado se era assim mesmo que deveria resolver. Esse vídeo caiu como uma luva... cara que coincidência maluca haha obrigado por esclarecer, já posso deitar mais tranquilo no travesseiro e mostrar isso pro pessoal que questionou tb :D
-
Eu tava com sdd de um vídeo mais assim aqui no canal da Rocket. Curto, pra passar conteúdo indo direto ao ponto e sem ser pra dizer "Se quiser se aprofundar, faça nosso programa pago". Eu já estava ficando saturado de marketing (e olha que sou aluno). Então, é bom ver um vídeo da Rocket assim xD
-
Que saudade de vídeos mais curtos com um conteúdo top. Valeu Diegão, e aparece mais vezes com videos feras assim!
-
O pior do derived state é quando ele dá sinais falsos na UI. Um exemplo seria se essa lista de repositórios aí tivesse um coraçãozinho do lado pro usuário dar like. O like dado na listra filtrada não apareceria quando o usuário apagasse o filtro (e vice-versa), já que seriam essencialmente duas listas diferentes que só parecem ser iguais. Isso dá maior xabu.
-
Sensacional! Acho que acabei de passar por esse problema, e creio que esse vídeo veio em um ótimo momento, porque agora com ideia funcionando como foi planejada posso olhar essas questões de performance e ajustar erros que antes desconhecia.
-
A dica é top, mas seria o ideal usar o useMemo, com o search como dependência, para armazenar a lista filtrada. Sei que nesse exemplo o componente é só a lista com o filtro em si, mas se fosse um componente com mais algum outro state, se esse outro state mudasse, o filter seria recalculado à cada renderização, sem necessidade.
-
Excelente e muito necessário esse vídeo, adorei essas dicas, confesso que eu iria fazer esse filtro exatamente da primeira forma como foi implementado, e acharia normal as duas renderizações, mas com essas dicas eu já não vou mais cometer esses erros bobos. Valeu Diegão!
-
Que sensacional esse vídeo, isso acontece muito e já me deparei várias vezes nesse cenário. Valeu demais pelo vídeo Diegao e rocket 🔥🚀
-
Vídeo muito top Diego, parabéns. Traz mais vídeos nesse estilo mão na massa pfv, ajuda muitooo
-
Fala Diego! Cara, estava tentando melhorar um desempenho de uma página que estava fazendo requisição demais. E abri o Youtube, e me deparo com essa solução de cara. Sensacional! Parabéns pelo ótimo conteúdo, como sempre!
-
Nossa já cometi muito esse erro de estados derivados. Amei o vídeo, curto mas me ensinou muito. Faz mais vídeos assim Diego, continua fazendo os longos mas faz mais vídeos curtos também tratando de coisas pontuais. Hoje por exemplo eu nem teria tempo de estudar, cheia de serviço acumulado, filho, casa... mas enquanto estava rodando uma query gigante no banco consegui assistir a esse vídeo!! 😄
-
O ignite 2022 está bem melhor que o anterior. Estou aprendendo muito, parabéns!!!
-
Mais um vídeo incrível da Rockeseat, o Diego manja muito de React não tem como... E o tema do vscode que eu to usando atualmente é o Kanagawa, é o tema mais bonito do VSCODE que eu já usei.
-
Parabéns pelo video man! Fiquei incomodado com o tanto de render que o react fazia. Comecei agora a estudar, mas que bom que podemos usar o js/ts pra resolver esses problemas, achei que realmente era necessário renderizar.
-
Eu aprendi a fazer daquele jeito com vc msm kkkkkk Programacao eh muito dinamica ne, a msm pessoa q ensina de uma forma, tempo dps ensina de outra forma melhor. Muito massa! Parabens pelo conteudo. Gosto muito desse tipo de video. Abraco
-
Diegao eu programo a react a uns anos já e com certeza tem esse tipo de escolha em alguns repositórios meus rs! Muito bom esse vídeo simples e objetivo! Abs
-
Fala Diegao! Um tema do vscode q já uso tem muitos anos é o Fantastic, dentro desse tema existe vários outros temas, eu uso mais a verdade material do Fantastic, mas todas as opções dele são fantásticas!
-
Diegão quem nunca passou por isso que atire a primeira pedra haha, conteúdo simples e objetivo parabéns.
-
Top, curte esse formato. Continue trazendo, rápido e bem informativo.
-
Fala Diego! Dica fantastática, esse tipo de conteúdo é muito valioso para todos nós, muito obrigado pela sua dedicação em compartilhar conosco! Grande abranço.
