Como você evita que atualizações de estado causem re-renderizações excessivas?

Question

Accepted Answer

Mudanças de estado acionam re-renderizações, e um estado mal estruturado pode causar **muito mais re-renderização do que necessário** — deixando o app lento. As estratégias principais: inscrever-se de forma estreita, dividir estado, memoizar e manter estado local. ## 1. Inscreva-se no mínimo de slice que você precisa ```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); ``` Inscrições seletivas (Zustand/Redux selectors, Jotai atoms) são o maior diferencial — componentes re-renderizam apenas quando seu slice específico muda, não a cada atualização da store. ## 2. Divida estado / contexto para limitar o raio de explosão ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoize componentes e 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 ``` Memoização evita que componentes filhos re-renderizem quando suas props (por referência) não mudaram — mas funciona apenas se você também manter props/callbacks referencialmente estáveis (daí `useCallback`/`useMemo`) e atualizar estado **imutavelmente**. ## 4. Mantenha o estado o mais local possível ```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. Não armazene valores derivados; evite novas referências a cada renderização ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Use seletores memoizados para dados 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 ``` ## Meça primeiro ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Por que isso importa Re-renderizações excessivas são a principal causa de apps React/baseados em estado lentos, e surgem de como o estado é estruturado e subscrito. O kit de ferramentas — inscrições seletivas estreitas, contextos divididos, memoização com referências estáveis, atualizações imutáveis e localização de estado — controla diretamente o escopo de re-renderização. Crucialmente, você deve **medir** (Profiler) para encontrar o verdadeiro gargalo antes de otimizar, pois memoização descuidada adiciona complexidade sem benefício. Entender o que aciona re-renderizações e como contê-las é essencial para apps em larga escala com bom desempenho.