Reaccionar el desglose de renderizado y re-renderizado con Vanilla Hooks

Hola, soy Miguel y esta vez les traigo otro nuevo tutorial.

Cualquiera que haya trabajado el tiempo suficiente en reaccionar se dará cuenta de que el costo de renderizar el DOM virtual en componentes aparentemente no relacionados se suma.

Entonces, la pregunta es, ¿cuándo necesita optimizar y cuál es un buen estilo para empezar?

A tener en cuenta: no veremos los costos reales de DOM, asumimos que React es inteligente al respecto, la mejor optimización probablemente sea el tiempo.

Todos los detalles se resolvieron jugando en un repositorio ficticio de la aplicación create react aquí: https://github.com/ayroblu/render-count (advertencia no es bonito)

Índice

Lo que sabemos

El DOM virtual es un árbol, esto significa que las re-renderizaciones harán que todos los nodos hijos ingenuos se vuelvan a renderizar, pero no sus nodos hermanos y padres. Esto tiene sentido porque hacemos la transferencia de datos de esta manera con accesorios.
Children es sólo otro accesorio, por lo que anidar nodos es lo mismo que pasarlos en accesorios.
El cambio de contexto hará que todos los nodos que usan este contexto con useContext cambien.

Árboles y memorización

Entonces, lo que sabemos de 1. es que cualquier orquestación estatal en los nodos principales será costosa. Una opción aquí es envolver todas las funciones en React.memo y, por supuesto, asegurarse de memorizar todos los accesorios como objetos y funciones.

Niños y accesorios de referencia

Lo que sabemos por 2. es que la composición nos cuesta ciclos de renderizado, porque JSX crea nuevos objetos que crean una nueva referencia, que disparará re-renderizaciones, incluso con React.memo.

POST RELACIONADO: Guía de campo de tipos avanzados de Python para desarrolladores de TypeScript

Sin embargo, tenga en cuenta que los componentes secundarios básicos no se volverán a representar en este caso.

Contexto

Lo que sabemos por 3. es que useContext y, de manera más general, el estado global se vuelve más caro aquí.

Las formas de mitigar esto son usando múltiples contextos más estrechos y / o adoptando un patrón redux con componentes de estilo "conectar".

Resumen

De esta manera, todos los componentes conectados siempre se volverán a renderizar, pero los componentes secundarios solo cambiarán cuando (en este caso) value1 cambie.

Por supuesto, puede escribir o usar un componente de orden superior de conexión real para esto, este código simplemente describe el principio.

Utilice React.memo en todas partes. Como ha sido destacado por otras publicaciones de blog, es posible que esto no mejore necesariamente el rendimiento en todos los casos; sin embargo, la desventaja es relativamente baja y la ventaja podría ser relativamente alta, especialmente cuando se utilizan componentes sofisticados de terceros. Si desea ser óptimo, pruebe y mida la diferencia de velocidad, pero esto es más esfuerzo del que vale, es un valor predeterminado más sensato que usarlo en ninguna parte.
Tenga cuidado con los objetos, incluida la composición de los nodos. Recuerde donde es razonable aquí.
Si usa un estado global, considere usar múltiples contextos en lugar del patrón combineReducers redux. También considere usar un patrón de conexión para detener las repeticiones innecesarias.

Gracias por leer este tutorial.