Rendering por todos lados

31/05/2019
Artículo original

Si creaste el contador con Hooks que revisamos con anterioridad, te habras dado cuenta que el contador se incrementa cada segundo, pero no usamos un interval estamos usando setTimeout; esto sucede porque estamos inicializando el setTimeout cada vez que renderizamos el componente y en React esto sucede cada vez que actualizas el estado de un componente, pero si tienes mas de 100000 componentes hijos (tal vez con un poco menos), notaras que empiezas a tener performance issues, antes de hooks la unica forma de solucionarlo es usar uno de las funciones del ciclo de vida de React shouldComponentUpdate pero eso nos obliga a que ese componente sea una Clase (y no queremos clases con Hooks, de hecho no queremos clases del todo :P, OOP is evil).

Para solucionar este posible problema, desde la version 16.6 de React tenemos React.memo que nos ayuda a mostar una version memoizada del componente que queremos, reduciendo drasticamente el numero de repintados en los hijos.

Codigo

Ahora veremos un ejemplo de contador usando React.memo

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Child = React.memo(props => {

leer más