Como evitar MUITOS renders no React!
JapaScript
0:00 / 0:00
Como evitar MUITOS renders no React!
1 124 просмотра · 2 года назад
JapaScript
311 подписчиков
1 124 просмотра · 2 года назад
Descubra como economizar renders de maneira eficiente e aprofunde seus conhecimentos sobre as estratégias de otimização em React!
Nesse vídeo vamos refatorar uma aplicação feita em React para economizar MUITOS renders! Apresentarei duas abordagens para resolver esse problema, explicando as diferença entre elas.
👉 Vídeo explicando em detalhes o processo de render no React: • Quando o React renderiza nossos componente...
👉 Código usado no vídeo: https://github.com/guilhermekuni/yout...
👉 Meus links: https://beacons.ai/guilhermekuni
Timestamps:
00:00 Preview
00:17 Introdução
00:51 Overview da aplicação e do problema
03:08 Overview do código
03:44 Analisando nossos renders com o Profiler
06:22 Relembrando quando o React renderiza nossos componentes
06:50 Solução 1 (memo): Aplicando React.memo na nossa lista
10:11 Solução 1 (memo): Aplicando React.memo no nosso item da lista
14:14 Solução 1 (memo): Aplicando React.memo nos dois componentes filhos
15:44 Solução 2 (composição): Refatorando nosso componente Modal
18:36 Solução 2 (composição): Refatorando nosso component TaskInput
23:00 Conclusão