Seus vídeos são muito esclarecedores cara!! Parabéns mesmo!! Sua didática é excelente! Em vez de só ensinar, você cria todo um cenário pra exemplificar o uso das ferramentas. Esse é seu diferencial! Continue assim!
Nossa, eu nunca tinha entendido o real funcionando do React Memo, e após esse vídeo, notei que um problema que tenho em performance com um projeto em produção, será facilmente solucionado com este recurso!!!! Valeu Galera #Rocketseat
Fala Diego, uma pequena observação: o termo correto da técnica empregada com o React.memo é memoização ( en.wikipedia.org/wiki/Memoization ). Excelente vídeo!
@@pablovinicius6725 Verdade. Na maioria das vezes um projeto pequeno que leva algumas libs somente acaba ficando pesado, sendo que nem é uma grande aplicação. Seria bacana não só pra você e eu, mas pra própria comunidade JavaScript.
@JSON Aí depende, eu particularmente sempre acho o build minificado do create-react-app bem grande. Até uma simples aplicação, com nada demais com quase 6mb.
Cara essas dicas de performance são sensacionais! Vou com certeza aplicar isso na minha empresa e por favor faça mais videos sobre o profile/devTools. Code Splitting seria bacana também!
O melhor dessa explicação foi o Diego ter usado o termo "Memorização" ao invés de "Memoização". Este segundo termo consta na documentação e em muitas explicações como se fosse a palavra mais usual do mundo, porém minha mente bugava por não entender esse termo . . .
Fala Diego e equipe da Rocket muito bom o vídeo eu como desenvolvedor deveria parar para ler as documentações porém fui jogado em um projeto de React de cabeça e não tive todo esse tempo e minha aplicação estava sofrendo justo disso, muito obrigado a todos da Rocket pela ótima dica, super útil
Sensacional, chega um momento em grandes apps que isso é muito necessário, ainda mais quando falamos de Dashboards... Por mais vídeos assim, sobre Performance! Talvez uma explicação a mais do Profiler ajudaria muito. Muito obrigado Diego!!
Parabéns Diego, sua explicação foi muito clara e objetiva em relação ao uso do memo. Estou aprendendo muito com você, espero que faça mais videos assim para a comunidade Dev.
Diego, outro ótimo vídeo, com muita didática e sempre trazendo dicas valiosas. Parabéns pelo trabalho que fazes disseminando as tecnologias, principalmente o React.
Muito boa essa didática! Tinha um cara das antigas o tal do Zeno Rocha que tinha essa pegada. Já que citei o tal Zeno Rocha, ele sempre ensinava sobre ferramentas do Chrome e dicas de debug. Seria legal falar mais sobre o ambiente no Chrome, performance e debug. Valeu Diego!
Assistindo em Junho de 2021, fui fazer o memo da forma como o Diego fez e deu bigode. Então fui olhar a documentação, e aparentemente mudou, aqui funcionou e eu fiz desta forma: import React from 'react'; export const PostItem = React.memo( function PostItem({ post }) { return ( CONTEUDO ); } );
Muito bom o video cara!! Bem explicativo e didático. E sim, queremos mais videos sobre performance em React hahaha!! Abraço e parabens a todos os envolvidos
Creio que fazer vídeos explicando o funcionamento e desempenho do React seja bastante interessante, pois os hooks trazem bastante utilidades nos quais as vezes os desenvolvedores não sabem quando utilizar e você consegue exemplificar bem os pontos. Ótimo vídeo!
Legal, agora entendi como funciona, obrigada! Uma sugestão seria explicar aqueles casos em que a gente carrega dados de uma API no estado dentro de um effect e aí coloca ele pra ser condição de renderização e isso gera um loop infinito, saca? Eu sempre me enrrolo pra resolver, seria legal mostrar qual é a melhor forma de modelar isso ;)
Ha uma semana atrás, eu estava com um problema de renderização... e era justamente com o input. Sempre q eu digitava algo no input, ele renderizava e perdia o foco. Então, para resolver de uma forma rápida, preferi isolar e torná-lo um componente a parte.
Eu passei por isso bem recentemente e nem me dei conta, era a mesma coisa que vc fez, um map e a chamada de um elemento dentro dele, e no meu eu até usava o estado do pai, mas ele não era alterado toda hora, agora com o memo ele só renderiza de novo quando precisa
Fantástico! Vou começar a usar nos meus projetos a partir de agora, vlw pela dica. Traga mais vídeos de performance por favor, e como utilizar o react dev tools a nosso favor. Ótimo conteúdo!
@@andersonsantanna6401 não, o que ele mostrou é próprio pra componentes, memo é um High order componente, useMemo é um hook. Dá uma olhada na documentação do React.
Perfeita explicação, ainda mais mostrando o problema antes. Isso ajuda a esclarecer. Muito top. Show.
Faaaala, Anderson! 🚀
Valeu demais pelo feedback! 💜
Na prática assim fica mais fácil de entender, né!? 😉
Seus vídeos são muito esclarecedores cara!! Parabéns mesmo!!
Sua didática é excelente! Em vez de só ensinar, você cria todo um cenário pra exemplificar o uso das ferramentas. Esse é seu diferencial! Continue assim!
Diego arrasa, né? Valeu pelo feedback, Gilson!! 💜💜
Nossa, eu nunca tinha entendido o real funcionando do React Memo, e após esse vídeo, notei que um problema que tenho em performance com um projeto em produção, será facilmente solucionado com este recurso!!!! Valeu Galera #Rocketseat
Essa dica é EXTREMAMENTE útil para o dia a dia!
Parabéns!
Fala Diego, uma pequena observação: o termo correto da técnica empregada com o React.memo é memoização ( en.wikipedia.org/wiki/Memoization ).
Excelente vídeo!
Vale muito a pena rever esses vídeos. Super me ajudou num projeto aqui. Valeu Diegão!
Excelente! O Code/Drops é muito bom pra ajudar a esclarecer esses conceitos individualmente. Obrigado pela ótima explicação!
Mais uma vez o Diego junto a rocketseat arrasando em explicar de forma detalhada e com exemplos os componentes do react.
Melhor aula de Memo q já vi, parabéns.
Sensacional! Vou varrer a aplicação da empresa para descobrir os lugares bom para aplicar.
Poderia fazer um code drops de como diminuir o tamanho do build de uma aplicação React. No mais, Show de bola o conteúdo! Estão de parabéns!
Queria muito saber como lidar com libs grandes. Recentemente tive problemas no tamanho do bundle relacionado à lib React Pdf
@@pablovinicius6725 Verdade. Na maioria das vezes um projeto pequeno que leva algumas libs somente acaba ficando pesado, sendo que nem é uma grande aplicação. Seria bacana não só pra você e eu, mas pra própria comunidade JavaScript.
@JSON Aí depende, eu particularmente sempre acho o build minificado do create-react-app bem grande. Até uma simples aplicação, com nada demais com quase 6mb.
Tenta usar Code Split do react com lazy e Suspense
Super super. Cada video é um aprendizado sem preço. Amando d+
Excelente conteúdo! Não conhecia o Memo.
Faz sim um vídeo trabalhando só questões de performance. Seu vídeos um ouro pra quem trabalha com React.
Muito boa a dica! Se possível, faça outros vídeos falando mais sobre performance, por favor!
Cara essas dicas de performance são sensacionais! Vou com certeza aplicar isso na minha empresa e por favor faça mais videos sobre o profile/devTools.
Code Splitting seria bacana também!
O melhor dessa explicação foi o Diego ter usado o termo "Memorização" ao invés de "Memoização". Este segundo termo consta na documentação e em muitas explicações como se fosse a palavra mais usual do mundo, porém minha mente bugava por não entender esse termo . . .
Fala Diego e equipe da Rocket muito bom o vídeo eu como desenvolvedor deveria parar para ler as documentações porém fui jogado em um projeto de React de cabeça e não tive todo esse tempo e minha aplicação estava sofrendo justo disso, muito obrigado a todos da Rocket pela ótima dica, super útil
Sensacional, chega um momento em grandes apps que isso é muito necessário, ainda mais quando falamos de Dashboards... Por mais vídeos assim, sobre Performance!
Talvez uma explicação a mais do Profiler ajudaria muito.
Muito obrigado Diego!!
Vlw Diegoooooo, rápido, simples e sem deixar nenhuma dúvida
Me salvou com o meu problema com o react-window, obrigado Diegão
Mais uma dica sensacional! Muito bom essa contextualização antes da explicação, sem isso não seria tão fácil entender! Grande Diegao!
Show de bola! Me ajudou a resolver um problema de múltiplas renderizações na minha aplicação! Muito obrigado!
Sensacional, Ricardo! 💜 😍
Parabéns Diego, sua explicação foi muito clara e objetiva em relação ao uso do memo. Estou aprendendo muito com você, espero que faça mais videos assim para a comunidade Dev.
Cara, como alguém consegue dar um dislike num vídeo desses?! 🤦🏻♂️
Parabéns @Rocketseat!
Hahahah faz parte! Valeeu Marcelo! 💜💜
O cara tem um conhecimento absurdo, salvou muito a minha aplicação
Que massa que te ajudou Yuri =)))
Sensacional, simplesmente o problema que estou tendo em uma aplicação e com certeza já vou usar o React.memo pra resolvê-lo!!
Maravilhaaaa, João! Depois conta pra gente se deu certo! 💜 🚀
@@rocketseat Deu certo sim, perfeitamente! Usando o React.memo e mais alguns ajustes a aplicação rodou lisinha hehehe
Nossa, salvou demais!
Com certeza vou ajustar 80% dos meus componentes!
conhecia mas não utilizava, principalmente o uso do profile no devtools.
Muito bom, Obrigado Rocketseat
Já testei por aqui
Diego, outro ótimo vídeo, com muita didática e sempre trazendo dicas valiosas. Parabéns pelo trabalho que fazes disseminando as tecnologias, principalmente o React.
Refatorando meu app agora mesmo!!! Com toda certeza vou utilizar o React.memo, principalmente nos formularios. valeu demaaaaaais!!!
É muito prático, né, Manoel!? 💜 😍
Depois conta pra gente como foi a experiência! 😉
Muito bom, vc é ótimo na explicação, estava sofrendo para aprender mas vc foi 10....
Mind blowing!! Explicacao perfeita!! Parabéns Diego e Rocketseat : )
Muito boa essa didática! Tinha um cara das antigas o tal do Zeno Rocha que tinha essa pegada. Já que citei o tal Zeno Rocha, ele sempre ensinava sobre ferramentas do Chrome e dicas de debug. Seria legal falar mais sobre o ambiente no Chrome, performance e debug. Valeu Diego!
Incrível! Parabéns pela didática manda muito bem!
Comecei a utilizar o React.memo essa semana e rolou vídeo hahaha, sensacional a explicação!
Show. Com certeza fará parte desde já do dia a dia.
Cara que explicação incrível, muito bom mesmo, tu é muito braboooooooooooooo!!
cara! fantástico depois que nós entendemos o reconciliation... valeu pela dica!
Nem sei quantos likes o Diego merece por essa dica! Rocketseat ❤️
Se possível faz um vídeo relacionado a segurança ✌🏻
Ajudou bastante esse Code Drops... faça mais videos sobre performance. valeu !!!
Meu deus cara, você merecia um oscar!
Saudade dos code drops! Era massa hehehe
Aula incrível, Diego! Valeu demais!
Assistindo em Junho de 2021, fui fazer o memo da forma como o Diego fez e deu bigode. Então fui olhar a documentação, e aparentemente mudou, aqui funcionou e eu fiz desta forma:
import React from 'react';
export const PostItem = React.memo(
function PostItem({ post }) {
return (
CONTEUDO
);
}
);
Por favor youtube, habilite a possibilidade de dar joinha infinitamente. Que sensacional Diego!!!
Massa d+, sim quero que explique essas dicas de como verificar a performance usando o dev tools e obviamente irei utilizar
Muito bom o video cara!! Bem explicativo e didático. E sim, queremos mais videos sobre performance em React hahaha!! Abraço e parabens a todos os envolvidos
Faaala Vini! Muito obrigado pelo feedback! 💜💜
Aula maravilhosa! Valeu Diego!
Muito top, continue com essas dicas de ouro abraço
Sensacional.. Essas dicas ajudam muito.. Já passei por alguns problemas assim, o componente ficava renderizando toda hora
Creio que fazer vídeos explicando o funcionamento e desempenho do React seja bastante interessante, pois os hooks trazem bastante utilidades nos quais as vezes os desenvolvedores não sabem quando utilizar e você consegue exemplificar bem os pontos. Ótimo vídeo!
Vaaleu Alfredo!
Obrigado pela dica, vou utilizar sim, to fazendo um projeto pra uma empresa mais conhecida que tem muitas listas e não sabia disso.
Perfeito, Muito bbom. Parabéns!!!
Muito bom, bela dica de performance Diego!
Sensacional! Já tô utilizando!
Nice Diegão, vou utilizar hoje ja
Sem comentários, 10/10
Era isso que faltava na minha aplicação.
Fala Diego! Cara, passando por isso e já sei os meus functional components que posso aplicar o Memo
Seus vídeos tem ajudado bastante.
Que massa, Alexandre! 💜 🚀
Quais tipos de conteúdo você ta curtindo mais!? 😊
@@rocketseat com certeza os Hooks cara. Até parece que você entra na nossa cabeça e trás dúvidas do nosso cotidiano.
Adorei. Vou começar a usar agora
Boooa, Hiago! Usa e conta pra gente a experiência! 😉 💜
Aula muito massa.
Valeeeu, Mário! 😉 💜
@@rocketseat Acho que eu devia dizer isso. Vocês ajudam imenso a gente.
Faz mais vídeos assim, acho super importante saber mais sobre performance
Com certeza Peedro! =))
Que explicação! Muito bom!
muito bom, estou implementando um projeto para minha empresa e vai ser muito útil o entendimento de questões perfomáticas pra react !! FAZ MAIS !!!
Mais uma vez, excelente!
Muito bom!!! Explicação objetiva e clara!!!
Fala Deivid! Valeeu pelo feedback! 💜💜
Muito show, não sabia do memo
Muito bom!!! Parabéns! Ganhou mais um inscrito!
Sempre trazendo conteúdos fodas! Parabéns, vou me atentar mais a esse aspecto de performace.
Cara, isso me ajudou muito. Excelente video!!
Show Levi!! Valeeu pelo feedback! 💜
Amazing as always!
opa, conteudos de performance do react vai ser muito show!!!!!!
Vaaaleu pela sugestão, William! 💜
Era porreiro que fizesses um video a explicar o uso do useMemo e useCallback. Obrigado
Mind Blowing 🤯
Otimo conteudo. Ainda quero um video sobre Debug no Front.
Legal, agora entendi como funciona, obrigada! Uma sugestão seria explicar aqueles casos em que a gente carrega dados de uma API no estado dentro de um effect e aí coloca ele pra ser condição de renderização e isso gera um loop infinito, saca? Eu sempre me enrrolo pra resolver, seria legal mostrar qual é a melhor forma de modelar isso ;)
dependencias ?
explicação top muito bem explanado
Performance é tudo mesmo!
tava precisando exatamente dessa dica e realmente funciono
Que massa!! 💜 😍
Usando memo a partir de hoje, faz mais vídeo de performance e sobre essa ferramenta tmb!
Adorei!!! Gostaria de mais dicas como essa :)
Ha uma semana atrás, eu estava com um problema de renderização... e era justamente com o input.
Sempre q eu digitava algo no input, ele renderizava e perdia o foco. Então, para resolver de uma forma rápida, preferi isolar e torná-lo um componente a parte.
Salvou meu projeto!
Wooow! Que massa, Savio! 💜
Eu passei por isso bem recentemente e nem me dei conta, era a mesma coisa que vc fez, um map e a chamada de um elemento dentro dele, e no meu eu até usava o estado do pai, mas ele não era alterado toda hora, agora com o memo ele só renderiza de novo quando precisa
Maravilhoso, obrigado.
Show que curtiu, Rafa! 💜 😍
Ótima explicação
Muito fera!
PERFEITOOOOOOOOOOOOOOOOOOOOOOOO
Fantástico! Vou começar a usar nos meus projetos a partir de agora, vlw pela dica. Traga mais vídeos de performance por favor, e como utilizar o react dev tools a nosso favor. Ótimo conteúdo!
Fala José!! Valeeu pelo feedback e sugestão 💜
sensacional! +Dicas
Não usava e agora partiuuuu!
Boooa, isso aí! 💜
Mano eu vi o logo na frente do seu pescoço e achei que estava com uma tala de imobilização 😂😂😂
Gostei muito, traz mais vídeos de perfomance.
E o useMemo? funciona da mesma forma? quando usar um ou outro??
useMemo é pra propriedades/variáveis. Exemplo algum cálculo que você fez no componente que não será alterado frequentemente
@@danielfs Obrigado pelo esclarecimento, mas para componente da forma que ele usou agora poderia usar também ?
@@andersonsantanna6401 não, o que ele mostrou é próprio pra componentes, memo é um High order componente, useMemo é um hook. Dá uma olhada na documentação do React.
Dá pra usar useMemo em componentes sim
Muito bom, poderia fazer mais sobre performance e tbm de segurança no JS e no RN
vou usar agora
Depois conta pra gente como foi a experiência! 💜
Muito bom!
Uma dúvida, quando não é recomendável usar o React Memo?