Перейти к содержимому

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