¿Qué es React.memo? ¿Se puede envolver toda la aplicación en memo? ¿Por qué es malo usar la memorización en todas partes?

React.memo — es un componente de orden superior que optimiza los componentes funcionales, evitando que se vuelvan a renderizar si las props no cambian. Compara las props actuales y anteriores y vuelve a renderizar el componente solo si hay cambios.

Técnicamente, se puede envolver toda la aplicación en React.memo, pero no es recomendable. Normalmente, la memorización es útil para componentes que reciben props iguales con frecuencia y que son costosos de renderizar.

Por qué es malo usar memorización en todas partes:

• Los costos adicionales de comparar props pueden superar los beneficios de saltarse el renderizado.
• La memorización complica la lógica y la depuración.
• No todos los componentes se benefician de la memorización, especialmente los simples y rápidos.

Ejemplo de uso de React.memo:

const MyComponent = React.memo(function MyComponent(props) {
  // el componente solo se volverá a renderizar si cambian las props
  return <div>{props.value}</div>;
});