ReactJS: Quando e Como Usar Memoization para Evitar Re-Renders

[@devjunioralves]

Grandes novidades estão chegando! 👉 Inscreva-se agora e fique por dentro de tudo! Livro que recomendo de mais sobre React Avançado! 👇👇👇 amzn.to/3WTHkWp JavaScript: O Guia Definitivo: amzn.to/48jh9vp Clean Code amzn.to/3hHXVKY Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7 --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

[@danielmonaro4835]

Muito bom! Pfvr faz mais videos sobre performance e quando devemos realmente utilizar esses hooks.

[@emeci430]

Rapaz q vídeo foi esse.. tu elevou o bagulho pra outro nível... Agora tudo faz sentido...

[@eduardobertozi8506]

Cara foi muito boa a sua explicação sobre isso, é muito difícil achar alguem que explique de forma clara e prática. Eu acho que caberia o hook useMemo também, que serve pra estabilizar uma variável assim como fez com a função ali. :D

[@claytonjatoba]

Como sempre mais um conteúdo muito bom, uma dica de vídeo seria passar os problemas de usar o memo e useCallback em qualquer componente, para evitar por exemplo comsumo excessivo de memória e outra seria do uso do React Dev Tools, passar item por item dele principalmente o funcionamento do Profiler para explicar como identificar os problemas de performance e validar as correções

[@canalMiven]

eu acho legal tu trazer mais videos sobre performance

[@DiogoLScarmagnani]

Junior por favor aumenta sua fonta no VS Code. Eu sei q no PC é suave enxegar mas no cel fica bem ruim pra gente cegueta como eu. kkk

[@devjunioralves]

Po mano, valeu pela dica, nesse vídeo eu acabei esquecendo de dar mais um zoom, peço desculpas. Valeu demais pelo feedback.

[@joezersmaniotto3103]

Já faça isso a um bom tempo, mas é execelente ver o vídeo sobre. Lmebro que quando comecei não entendia muito bem a diferença entre meno e useMemo, não sei se já tem vídeo para isso. Mas em resumo, useMemo é para variaveis, que queremos memorizar .... que tem um calculo complexo, então para não ser necessário recalcular a cada re-render

[@devjunioralves]

Tem sim man, mas é exatamente isso!

[@EnzoGlauber]

brabo demais!

[@devjunioralves]

Valeuuuu!

[@markus_dev_cwb]

Conteúdo Top!

[@harlleybh]

ótimas dicas

[@ederfleming6905]

No seu curso você aborda toda essa parte de performance, uso de react-query e afins??

[@devjunioralves]

Lá o foco é mais no Nextjs e as features dele que usamos pra desenvolver o blog, mas além disso, abordo testes, SOLID também.

[@eduardodealmeidafernandes6719]

Fantástico conteúdo, sua didática é muito boa e facilita bastante o entendimento! Só me surgiu uma dúvida, quando eu sei o momento certo de usar essa combinação? Na minha percepção pareceu ser útil usar em todo componente, mas na prática tem algo que eu posso identificar a necessidade ou não de colocar essa combinação?

[@devjunioralves]

Boaaa Eduardo, sempre que for necessário estabilizar uma função, o useCallback vai ser necessário. Exemplo, passar uma função como prop, é interessante utilizar o useCallback.

[@dev-isaac-gomes]

projeto que eu trabalho hj parece até o filme "a origem" de tanto prop-driling KKKKKK

[@joezersmaniotto3103]

Zustand

[@devjunioralves]

Kkkkkkkkkkkkkkkkk caraca mano, aí é tristeza

[@nezzzumi1]

valeu

[@IsmaelHenrique-zq5zu]

Cara, poderia me tirar uma dúvida? Quando usar?

[@jhonbrugg]

vejo muitos devs usando next praticamente para tudo sem necessidade, desde que eu lembro ele vazia sentido para projetos que precisavam melhorar o SEO, como e-commerces e etc... e para carregamento inicial, porque ele era renderizado do lado do servidor, poderia falar sobre isso?

[@iurynathan]

Justamente, NextJS ele é renderizado no lado do servidor fazendo com que seja enviado o HTML pronto para o front assim facilitando com que seja indexado, o react ele renderiza no lado do cliente apesar que as atualizações o react está indo para o lado server side também. Tem outras caracteristicas também que difere os dois, mas esse é o principal.

[@feliperfranco]

Seria interessante falar quando é necessário usar o useCallback e o memo, pois seu exemplo é bem simples justamente para ser didatico mas na "vida real" esse exemplo não seria necessário o useCallback e o memo pois seria algo bem pequeno e que não teria problema de performance.

[@devjunioralves]

Boa, mas eu comentou no vídeo um ponto sobre isso, sempre que necessário estabilizar uma função, o useCallback vai ser necessário, como por exemplo, passar uma função como prop.

[@Evandro20]

Um bom exemplo para usar o memo seria um componente pai com vários componentes filhos que renderiza através de um index, com o memo evitaria todos os componentes renderizar novamente

[@mateusjbarbosa99]

Sempre que identifico a necessidade do uso do memo, o useCallback também é necessário?

[@devjunioralves]

Não necessariamente, o useCallbak é mais "comum" utilizar, pois sempre que temos uma função passada como prop para outro componente, é interessante a gente usar ele.

[@GabrielOliveira-ox4bg]

Não entendi plenamente o que você explicou (deve ser pq sou backend fazendo trabalho de front), mas irei implementar no sistema que estou trabalhando kkk

[@dev-isaac-gomes]

bora que eu to com fome

[@devjunioralves]

Boraaaa que hoje tem vídeo!