Как предотвратить чрезмерные переотрисовки при обновлении состояния?

Question

Accepted Answer

Изменения состояния вызывают переотрисовки, и плохо структурированное состояние может привести к **гораздо большему количеству переотрисовок, чем необходимо** — замедляя приложение. Ключевые стратегии: узкие подписки, разделение состояния, мемоизация и локализация состояния. ## 1. Подпишитесь на минимальный срез, который вам нужен ```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); ``` Избирательные подписки (селекторы Zustand/Redux, атомы Jotai) — это самый мощный рычаг — компоненты переотрисовываются только когда меняется их конкретный срез, а не при каждом обновлении хранилища. ## 2. Разделите состояние / контекст, чтобы ограничить зону влияния ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Мемоизируйте компоненты и значения ```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 ``` Мемоизация предотвращает переотрисовку дочерних компонентов, когда их пропсы (по ссылке) не изменились — но это работает только если вы также сохраняете пропсы/обратные вызовы рефернциально стабильными (отсюда `useCallback`/`useMemo`) и обновляете состояние **иммутабельно**. ## 4. Сохраняйте состояние как можно более локальным ```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. Не храните производные значения; избегайте новых ссылок при каждой переотрисовке ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Используйте мемоизированные селекторы для производных данных ```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 ``` ## Сначала измерьте ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Почему это важно Избыточные переотрисовки — основная причина вялости React/управляемых состоянием приложений, и они возникают из-за того, как структурируется и подписывается состояние. Набор инструментов — узкие избирательные подписки, разделённые контексты, мемоизация со стабильными ссылками, иммутабельные обновления и локализация состояния — напрямую контролирует область переотрисовки. Важно то, что вы должны **измерить** (Profiler), чтобы найти реальное узкое место перед оптимизацией, так как неосторожная мемоизация добавляет сложность без пользы. Понимание того, что вызывает переотрисовки и как их содерживать, важно для высокопроизводительных крупномасштабных приложений.