React - Guia definitivo de performance (useMemo, useCallback, memo) - Code/drops #82
HTML-код
- Опубликовано: 7 фев 2025
- O React é uma biblioteca extremamente performática e, na grande maioria das vezes, não é necessária a realização de nenhuma otimização no componente dado que otimizações prematuras podem causar mais perdas do que ganhos na performance da aplicação.
Ainda assim, em alguns momentos, existem oportunidades para evitarmos renderizações desnecessárias em componentes no React utilizando funcionalidades como memo, useMemo e useCallback.
Reconciliação no React: pt-br.reactjs....
-----
Confira a grade completa de conteúdos do canal aqui: rocketseat.com...
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Nos ouça também no Spotify:
Podcast Faladev
Podcast Alumni
Podcast Proxy
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Estou desenvolvendo um App usando React Native e me deparei com múltiplas re-renderizações desnecessárias e decidi seguir o desenvolvimento do módulo em que trabalhava para, depois, analisar como poderia resolver isso e refatorar o necessário. Finalmente chegou a hora e passei o final de semana lendo a respeito a fim de iniciar o processo hoje.
Aí vem vocês e me presenteiam com esse vídeo com timing perfeito.
Vocês, definitivamente, merecem o reconhecimento que possuem com todo esse conteúdo de qualidade que produzem!
Tenta usar o React.memo, useCallback, useMemo são hooks do próprio React.
Que conhecimento incrível, vou elevar meu react a um novo nível.
Que massa que curtiu, William! Boooooora pra cima com esse React aí! 💜 🚀
Estou estudando Hooks a umas duas semanas agora e esse conteudo é o mais abrangente abordando profundamente os conceitos. conteudo de muito valor agregado.
para quem estiver estudando aconselho aprofundar mais o conhecimento em documentações. ainda me pego na duvida de quando ou não usar.. acredito que so vou saber na pratica, no dia a dia.
via de regra, se tá com dúvidas, então nem usa. Vai programando e Deixa quebrar! Quando quebrar aí procura o motivo. Verifica os logs no console do computador, também. Quando tá rodando o react em ambiente dev, ele enche o console do navegador de avisos e erros, muito util para encontrar algo que tenha passado despercebido, tipo as re-renderizações.
51:13 eu em 90% do meu dia kkkkkkk
kkkkkkkkkk
Somos 2 KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
kkkkkkkkkkkk
É raro eu comentar vídeos, mas devo dizer que é o melhor conteúdo sobre o assunto que encontrei mesmo após quase vários meses depois de ser lançado.
Conteúdo desse vídeo ficou incrível, já havia assistido os vídeos antigos explicando sobre o useMemo e useCallback, mas sem dúvidas nesse vídeo a explicação ficou muito mais clara!!
Se possível, produz um novo cobrindo tudo sobre Redux com Duck Patterns 🙏
vlw Diegão. Voltei aqui anos depois só pra revisar o useCallback, mas assisti tudo de novo só pra aproveitar e verificar o que no começo posso ter perdido e o que tenho usado com maestria.
Esse algoritmo vai salvar muitos casais!
Ba dum tsss
Muito Grato
Foi ótimo
Na caminhada da aprendizagem básica
em backend e intermediária em frontend . Interessante o REACT. Para mim que sou iniciante, parece um ótimo caminho de aplicação do javascript.
Parabéns pelo ótimo trabalho e conteúdos.
Abraços e sucesso ;)
you have about the software. I personally enjoy learning so it was a little bit easier to do it over ti. But you’ll get there brother
Fala Diegão! cara... conteúdo sensacional!!! 💜🚀
Faaaala, Pablo!
Que show que curtiu! 💜 🚀
I didn't know this video existed! Thanks bro! Really grateful.
Diego, amigo... as vezes tenho a sensação de que, foi você que criou a linguagem. Deus abençoe, mano! Fantástico!
Esse conteúdo foi um presente! tks!
digitando com os pés porque estou aplaudindo com as mãos! rs 👏👏👏 conteúdo nota 1000! top!
Muito bom. Já estou correndo para resolver uma penca de problemas com minha aplicação. Finalmente entendi o porquê de um componente mudava junto com o outro, estava maluco com isso.
Aula top! Tirou várias dúvidas... essa vale a pena ver de novo kkkk
Diego grava um vídeo falando sobre autenticação social no NextJS com backend próprio. Parabéns pelo vídeo!
Achei Toooooop! Obrigado por compartilhar o conhecimento, Diego.
Conteúdo muito bom Diego! Me salvou em uma entrevista!!
Sério, Jady? Poxa, que show! Boa sorte aí! 💜
O brabo tem nome
Muito bom mesmo! Esse tipo de conteúdo é muito esclarecedor mesmo tendo a base.
Está de parabéns Diego e todo time Rocketseat!!! \o
Video monstro! Aprendi muito aqui.
Gosto muito dos seus vídeos!
Show! Direto e reto
Uma pena não conseguir dar 2 likes. Parabéns pelo conteúdo.
Aula muiito didática e informativa! Com certeza vai ajudar e muito nos projetos! 💜
Que aula, Diegão!!! Boa demais
Vlw Diego mais um conteudo de alto valor
Que show que curtiu, Gilberto! 💜 🚀
Hey man, It works great and without any problems.
Muito bom, perfeito!!!
Esse vídeo é incrivel!!
Que vídeo, que vídeo, obrigadoo
brabo y brabo 🔥
Excelente conteúdo!!!!
Aprendi muito!!
Wooow! Boa demais, Wilton! 👏🏻 👏🏻 👏🏻
Que conteúdo massa !!!!
Que massa que curtiu! 💜 🚀
Eu sendo psicopata por eficiência e desempenho olhando esse video...
Muito bom! Obrigado
thanks, downloaded, all works!
the right and it will soft like magic!!
Gostei bastante da aula, mas admito que voltei umas 5x no 20:15 kkkkkkkkkk
Obrigado
44:30 salvou minha pele.. ehehe
Diego começa a usar o Vite pra criar os projetos react nesses vídeos. Muito mais performatico que o CRA pra tudo, como você já deve saber.
Muito show!
Fala Diego! Parabéns pelo vídeo! Bastante esclarecedor e certamente um dos melhores que já assisti sobre o assunto!
Deixa eu te fazer uma pergunta: como tem sido sua experiência como um todo usando o Linux ultimamente? Refiro-me ao desenvolvimento web e mobile, ferramentas, gravação e edição de vídeo, estabilidade geral do sistema, produtividade... Notei que em alguns vídeos vocês têm tido problema de indexação de arquivos ao excluir pastas no VSCode, e tals.. algo mais que você poderia compartilhar com a gente? Eu uso Mac desde 2010 e nas empresas em que trabalhei usando Linux eu gostei bastante, mas sempre tinha alguns detalhes ruins e nunca me sentia tão produtivo quanto no Mac. Como tem sido a sua experiência?
Show demais.
Esses dias passei numa entrevista e o headrunter e o SM da empresa e do time la perguntou: Conhece React, Node, Mongo e GraphQL................. eu disse: EU tenho senioridade em Javascript, tenho expertise. Essas questões de front ta tranquilo. Resumindo, nao passei claro. AI o headhunter disse que precisava de um cara fera no react etc.............. eu dei risada, e agradeci! Depois refletir: Poxa, não entendi, o que o react faz que eu não faria em codigo puro ???? Ai , claro, a conclusão............... a galera da nossa area é muito desenformado. Nao tem raizes, nao aprendem fundamentos de programação, compilador, computador, pilhas TCP/IP para entender os protocolos que usamos nas diversas camadas que interagem com a WEB e tal. Enfim........... a mente do povo ja esta alienada em utilizar tecnologias de outras empresas, tipo, seguir a MODINHA................ e desprezam o que realmente é importante, que é: CONHECER A LINGUAGEM que esta utilizando para desenvolver a solução
Seria uma boa trazer video sobre testes👀🔥
Ótimo vídeo!
Faltou comentar que quando você utiliza o useMemo a callback é executada e o valor dela é armazenado na memória, e com o useCallback apenas a referência é armazenada, não executando a callback pela primeira vez. (Se foi dito me desculpe por favor, posso ter perdido).
Salve! Grande vídeo, informações muito valiosas.
Só um comentário, o React.memo considera apenas as props do componente, ou seja, um state ou context continuaria causando o update do componente
thanks bro it's really help
Fala Diegao, obrigado pelo conteúdo
Excelente
Gostaria de um vídeo sobre teste no react native é sobre quais teste fazer e como
Se possível algo mais avançado com contextApi, estados da aplicação e renderização condicional de componentes, por exemplo
{isAuthenticated ? : }
Ou também quando utilizamos loader na screen
if (isLoading) { return }
…… continuação componente export default
Valeu
thank u helped me a lot
Diegão faz um video sobre error boundaries
Não se entendi bem, mas é como se usando o callback, a função ficasse em uma memoria compartilhada assim a referencia pra função seria sempre a mesma.
assistindo
Show
Fala Diego, poderia fazer um semelhante mostrando no react native, pois as ferramentas para pegar estes gargalos no RN são mais limitadas, pelo menos eu não conheço uma que mostre tão detalhadamente.
up
Conteúdo incrível! Condensado, organizado, realmente de muito valor. Mas, e quanto ao tema sobre Presentional and Container Component Pattern?
Fala Diego, que tal comparar a renderização do React com a do Vue?
Diego, uma dúvida, você costuma usar 'const/arrow function' ou 'function' na criação de funções dentro de um componente?
Eu particularmente prefiro usar function, mas não existe grandes diferenças no uso.
@Felipe Oliveira O nome desse processo é Hoisting.
"Em JavaScript, toda variável é “elevada/içada” (hoisting) até o topo do seu contexto de execução. Esse mecanismo move as variáveis para o topo do seu escopo antes da execução do código."
I drank all the milky-milk in my sippy cup!
11:45 Qual a sugestão pra esse "problema"?
Muito obrigado pelos vídos. Mas por favor: Compre um TECLADO SEM BARULHO por causa do microfone! 🙂🙂🙂
It really is
Acho que esses states do react, deveriam ser funções intrínsecas do sistema. E como se comparar linguagens que tem controle de memoria e outras nao. Java tem o Garbage collection intricicamenteo no sistema e algumas outras nao. Entao no final das contas parece ser um furo que merecia ser corrigido. Mas aula muido boa.
Salve galera, tenho uma duvida, já vi muito em algumas discussões e alguns pacotes que o pessoal dentro de um context retorna o valor memorizado, ou seja, passa todo os valores do context dentro de um useMemo e exporta eles no provider.
Gostaria de saber se se isso é realmente correto, e quais as situações isso pode ser "viavel"
Salve Diego!
Saaaaalve, Mateus! 💜
Qual é o Linux o o.s que ele usou no vídeo?
isso serve tanto pra React quanto pra React Native?
Vue não faz isso por default?!
Diego, podem existir casos de que eu queira que algum calculo seja executado toda vez que um estado mudar. Por exemplo, sempre que eu marcar um Todo como concluido, quer verificar a media de Todos.
O useMemo encaixa-se nessa situação também ? Ou para esses casos, devemos usar sempre o useEffect?
Cara, você consegue fazer das duas formas
Com o useState+useEffect fica um pouco mais complexo pois vai ter que controlar o estado (é possível mas não recomendado).
Com o useMemo, funciona, tens que ver se vale a pena armazenar esse valor em memória (tamanho da lista + vai usar o resultado em outros componentes?)
E também deixar o react renderizar sempre (o resultado é um tipo primitivo (number), o shallow vai funcionar).
Diego qual software você utiliza para gravar sua tela?
Opa, uso o OBS.
Po, tu explica muito bem de verdade.
Mas tu faz uns barulho ca boca, que fica MUUUITO díficil assistir pra quem tem nervo de barulho. Igual quando uma pessoa ta comendo. Eu tento, tento, tento, pq sua explicação é boa, mas esses barulho... ARGHHH
Opa !
just woke up in hospital.
Galerinha qual o sistema operacional que ele usa? valeeeu
KUbuntu. tem um vídeo do canal do Guilherme Rodz que ele customiza e fica desse jeito aí.
@@GabrielSilva-ni4jy teria o link?
ruclips.net/video/h-FsG-QpgfI/видео.html&ab_channel=GuilhermeRodz
@@GabrielSilva-ni4jy valeeuuuu! TMJ.
+sub, workis
put the softs on the play them back to myself lol..
Hey,
Fr
Hacked i guess
The tutorial is very informative how to get hack easily just follow the tutorial0_0)
Eu acredito que se vc investir em ESTUDAR A LINGUAGEM javascript............ vc não precisa de NADA DISSO, é libs em cima de libs kkkkkkkkkkk é uma pra arruma o problema da outra, vcs percebe isso kkkk PQ, simples! PQ a ferramenta NAO TRABALHA corretamente........................ APRENDAM Javascript e desapegar de libs de terceiros e cris VC suas ferramentas ;))