React - Guia definitivo de performance (useMemo, useCallback, memo) - Code/drops #82

[@Davesmg]

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!

[@rafaelinacio7148]

Tenta usar o React.memo, useCallback, useMemo são hooks do próprio React.

[@abnerwillys]

51:13 eu em 90% do meu dia kkkkkkk

[@lucaspacheco6163]

kkkkkkkkkk

[@cedroigor]

Somos 2 KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

[@vitorgonzaga9985]

kkkkkkkkkkkk

[@williamjog93]

Que conhecimento incrível, vou elevar meu react a um novo nível.

[@rocketseat]

Que massa que curtiu, William! Boooooora pra cima com esse React aí! 💜 🚀

[@Franklin7x]

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.

[@DjEdu28]

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.

[@_monkey_games]

Esse algoritmo vai salvar muitos casais!

[@rodrigoniederauer]

Ba dum tsss

[@hdsg0807]

É 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.

[@DjEdu28]

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.

[@vitorgonzaga9985]

Esse conteúdo foi um presente! tks!

[@lennonlemos455]

digitando com os pés porque estou aplaudindo com as mãos! rs 👏👏👏 conteúdo nota 1000! top!

[@vvitor7785]

I didn't know this video existed! Thanks bro! Really grateful.

[@CarlosYounes]

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 ;)

[@Dksjsuww8]

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.

[@brunoneckel2446]

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 🙏

[@pablodanilomota]

Fala Diegão! cara... conteúdo sensacional!!! 💜🚀

[@rocketseat]

Faaaala, Pablo! Que show que curtiu! 💜 🚀

[@Frankilintel]

Diego, amigo... as vezes tenho a sensação de que, foi você que criou a linguagem. Deus abençoe, mano! Fantástico!

[@claytonmartins3761]

Aula top! Tirou várias dúvidas... essa vale a pena ver de novo kkkk

[@luizleao5622]

Show! Direto e reto

[@marciogomes8312]

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

[@erickcrus]

Gosto muito dos seus vídeos!

[@Daniel-jt3dn]

O brabo tem nome

[@LeandroSimoesArt]

Video monstro! Aprendi muito aqui.

[@carlobatera]

Achei Toooooop! Obrigado por compartilhar o conhecimento, Diego.

[@dyja007]

Conteúdo muito bom Diego! Me salvou em uma entrevista!!

[@rocketseat]

Sério, Jady? Poxa, que show! Boa sorte aí! 💜

[@kaiophillipe6004]

44:30 salvou minha pele.. ehehe

[@ygortf]

Que aula, Diegão!!! Boa demais

[@contiero_]

Aula muiito didática e informativa! Com certeza vai ajudar e muito nos projetos! 💜

[@WoWGuirelle]

Uma pena não conseguir dar 2 likes. Parabéns pelo conteúdo.

[@Cristian7Bitencourt]

Muito bom, perfeito!!!

[@antoin3933]

brabo y brabo 🔥

[@danielvinicius4906]

Diego grava um vídeo falando sobre autenticação social no NextJS com backend próprio. Parabéns pelo vídeo!

[@tiagobarros7093]

Esse vídeo é incrivel!!

[@MoraesDev]

Vlw Diego mais um conteudo de alto valor

[@rocketseat]

Que show que curtiu, Gilberto! 💜 🚀

[@cesarfilho9930]

Muito bom mesmo! Esse tipo de conteúdo é muito esclarecedor mesmo tendo a base. Está de parabéns Diego e todo time Rocketseat!!! \o

[@Edy_sousa]

Hey man, It works great and without any problems.

[@alexandrenascimento3105]

Que vídeo, que vídeo, obrigadoo

[@wiltonvieira8201]

Excelente conteúdo!!!! Aprendi muito!!

[@rocketseat]

Wooow! Boa demais, Wilton! 👏‍🏻‍ 👏‍🏻‍ 👏‍🏻‍

[@Rafaelsr30]

Muito bom! Obrigado

[@andoresp_]

Que conteúdo massa !!!!

[@rocketseat]

Que massa que curtiu! 💜 🚀

[@mprandot]

Ó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).

[@boribilder_sem_basal]

Gostei bastante da aula, mas admito que voltei umas 5x no 20:15 kkkkkkkkkk

[@sdmastergames4905]

Eu sendo psicopata por eficiência e desempenho olhando esse video...

[@cristianomesquita2705]

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.

[@thomascosta947]

up

[@carlosemanuelribeirolopes269]

thanks, downloaded, all works!

[@natan.opsilva]

Obrigado

[@espinhara]

Fala Diego, que tal comparar a renderização do React com a do Vue?

[@vitorrubim1]

11:45 Qual a sugestão pra esse "problema"?

[@adegarapoanga8509]

the right and it will soft like magic!!

[@ellsonmendesYT]

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.

[@wesleydcm]

Muito show!

[@nskdeveloper260]

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

[@yuur1440]

Diegão faz um video sobre error boundaries

[@nexnuum]

Diego, uma dúvida, você costuma usar 'const/arrow function' ou 'function' na criação de funções dentro de um componente?

[@dieegosf]

Eu particularmente prefiro usar function, mas não existe grandes diferenças no uso.

[@thenriquedb]

@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."

[@MarcosSantos-sv1do]

Show demais.

[@marcioferlan]

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?

[@felins013]

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

[@n0n3br]

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.

[@f13flp]

thanks bro it's really help

[@eddypbr]

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"

[@tiagobarros7093]

Seria uma boa trazer video sobre testes👀🔥

[@dudugomes6702]

Conteúdo incrível! Condensado, organizado, realmente de muito valor. Mas, e quanto ao tema sobre Presentional and Container Component Pattern?

[@antonioulundo5765]

assistindo

[@thiagofreire8988]

thank u helped me a lot

[@crcc7374]

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

[@Reemi]

Qual é o Linux o o.s que ele usou no vídeo?

[@adriano9833]

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.

[@mateushenrique833]

Salve Diego!

[@rocketseat]

Saaaaalve, Mateus! 💜

[@funmachine2011]

Muito obrigado pelos vídos. Mas por favor: Compre um TECLADO SEM BARULHO por causa do microfone! 🙂🙂🙂

[@wandersondavid1695]

Show

[@xxxx3657]

I drank all the milky-milk in my sippy cup!

[@iorrancastro]

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?

[@mprandot]

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).

[@icavalheiro]

Vue não faz isso por default?!

[@diegocaiena1920]

isso serve tanto pra React quanto pra React Native?

[@nan-code]

Diego qual software você utiliza para gravar sua tela?

[@dieegosf]

Opa, uso o OBS.

[@Noely.Arruda]

just woke up in hospital.

[@nandonascimento6424]

It really is

[@CrazyHz-xg4it]

put the softs on the play them back to myself lol..

[@evertongodoi3584]

Galerinha qual o sistema operacional que ele usa? valeeeu

[@GabrielSilva-ni4jy]

KUbuntu. tem um vídeo do canal do Guilherme Rodz que ele customiza e fica desse jeito aí.

[@evertongodoi3584]

@@GabrielSilva-ni4jy teria o link?

[@GabrielSilva-ni4jy]

kzbin.info/www/bejne/nl6ppHpjhtWanKs&ab_channel=GuilhermeRodz

[@evertongodoi3584]

@@GabrielSilva-ni4jy valeeuuuu! TMJ.

[@maicon.mdj97]

Opa !

[@andrebarbosa-marca]

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

[@pedrapequena]

+sub, workis

[@diegosouza8427]

Hey,

[@meyanoyte7015]

Fr

[@armandofariasdealbuquerque5759]

The tutorial is very informative how to get hack easily just follow the tutorial0_0)

[@almeidabelly]

Hacked i guess

[@crcc7374]

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 ;))