¿Cómo evitas que las actualizaciones de estado causen re-renders excesivos?

Question

Accepted Answer

Los cambios de estado desencadenan re-renders, y el estado mal estructurado puede causar **muchos más re-renders de los necesarios** — ralentizando la aplicación. Las estrategias clave: suscribirse estrictamente, dividir estado, memoizar, y mantener estado local. ## 1. Suscríbete al mínimo que necesitas ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Las suscripciones selectivas (selectores de Zustand/Redux, átomos de Jotai) son la palanca más importante — los componentes se re-renderizan solo cuando cambia su slice específico, no en cada actualización del store. ## 2. Divide estado / context para limitar el radio de impacto ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoiza componentes y valores ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` La memoización evita que los componentes hijos se re-rendericen cuando sus props (por referencia) no han cambiado — pero solo funciona si también mantienes props/callbacks referenciamente estables (`useCallback`/`useMemo`) y actualizas estado **inmutablemente**. ## 4. Mantén estado lo más local posible ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. No almacenes valores derivados; evita nuevas referencias en cada render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Usa selectores memoizados para datos derivados ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Mide primero ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Por qué es importante Los re-renders excesivos son una causa principal de aplicaciones React/state-driven lentas, y surgen de cómo se estructura el estado y cómo se suscribe a él. El conjunto de herramientas — suscripciones selectivas estrictas, contexts divididos, memoización con referencias estables, actualizaciones inmutables, y localización de estado — controla directamente el alcance de re-renders. Crucialmente, debes **medir** (Profiler) para encontrar el verdadero cuello de botella antes de optimizar, ya que la memoización descuidada añade complejidad sin beneficio. Comprender qué desencadena re-renders y cómo contenerlos es esencial para aplicaciones de gran escala de alto rendimiento.