React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

API · Componentes

memo

Saltarse el render

memo() envuelve un componente para que React compare sus props con las anteriores. Si nada cambió por referencia, se salta el render. Es la pieza que hace que useCallback y useMemo valgan la pena.

La comparación

Por defecto, comparación shallow: === sobre cada prop. Por eso pasar un objeto literal nuevo en cada render rompe la memoización. Pasa primitivos, o estabiliza referencias con useMemo/useCallback.

Cuándo no la quieres

Si el componente es trivial o sus props cambian en casi todos los renders, comparar es más caro que renderizar. Reserva memo para subárboles caros o listas largas.

Tropiezos comunes

  • 01memo compara por referencia, no por contenido. {a:1} !== {a:1}.
  • 02Pasar children siempre rompe la memoización: cada JSX literal crea un objeto nuevo.
  • 03memo no es magia: en muchos componentes, no medirás diferencia. Perfila antes de aplicar.
¿Fue útil?
Inicia sesión para dar feedback