Debe usarlo cuando un componente pueda volver a renderizar incluso si tiene los mismos accesorios y el mismo estado. Un ejemplo de esto es cuando un componente principal tuvo que volver a renderizarse pero las propiedades y el estado del componente secundario no cambiaron. El componente secundario podría beneficiarse de PureComponent porque realmente no necesitaba volver a renderizarse. No necesariamente debe usarlo en todas partes. No tiene sentido que cada componente implemente el método superficial shouldComponentUpdate() . En muchos casos, agrega el método de ciclo de vida adicional sin obtener ninguna ganancia.

Puede ahorrarle drásticamente el tiempo de renderizado si tiene muchos casos en los que los componentes de nivel raíz se actualizan mientras que los elementos secundarios no necesitan hacerlo. Dicho esto, obtendrá mucho más al usar PureComponent en sus nodos de nivel raíz (es decir, PureComponent no mejorará tanto el rendimiento general en los componentes de nivel de hoja porque solo guarda los renderizados de ese componente).

Algunas advertencias sobre PureComponent se explican muy bien en los documentos de reacción.

React.PureComponent's shouldComponentUpdate() solo compara superficialmente los objetos.

Podrías perderte accidentalmente las actualizaciones de renderizado si los cambios de accesorios están muy profundos en un objeto anidado. PureComponent solo es excelente con objetos/accesorios planos simples o al usar algo como ImmutableJS para detectar cambios en cualquier objeto con una comparación simple.

Además, shouldComponentUpdate() de React.PureComponent omite las actualizaciones de accesorios para todo el subárbol de componentes. Asegúrese de que todos los componentes secundarios también sean "puros".

PureComponent solo funciona cuando la representación de su componente depende solo de los accesorios y el estado. Este siempre debería ser el caso en React, pero hay algunos ejemplos en los que necesita volver a renderizar fuera del ciclo de vida normal de React. Para que PureComponent funcione como se esperaba (saltando la nueva representación, no es necesario que suceda), cada descendiente de su PureComponent debe ser 'puro' (dependiendo solo de los accesorios y el estado).

De acuerdo con esta referencia , no (no debe usarlo en todas partes):

(Trabajo en React). [...] Si recomendáramos que PureComponent se use en todas partes, probablemente ya sería el predeterminado. Más bien, la comparación para decidir si un componente debe volver a renderizarse o no cuesta algo, y en el caso de que desee volver a renderizar, todo el tiempo dedicado a comprobar si debería haberlo vuelto a renderizar se desperdicia.

En cambio, le sugerimos que sea consciente de dónde necesita hacer las comparaciones. Por lo general, solo se encuentra en un par de lugares en su aplicación. Los buenos candidatos se encuentran en los elementos secundarios de una lista larga o alrededor de grandes partes de la aplicación que cambian de forma independiente (es decir, los casos en los que sabe que el elemento principal debe volver a renderizar pero el elemento secundario no). Unos pocos usos bien ubicados de shouldComponentUpdate (o PureComponent) pueden ser muy útiles.

--

Encontré un tweet de Dan Abramov diciendo lo mismo (30 de julio de 2016).