Оптимизация контекста React: предотвращение избыточных ререндеров

mermaid

graph TD
    A[Главный компонент] --> B(Context.Provider)
    B --> C[Компонент А]
    B --> D[Компонент Б]
    B --> E[Компонент В]
    D --> F[Компонент Б1]
    D --> G[Компонент Б2]
    F --> H[useContext hook]

Проблема: При обновлении контекста React по умолчанию ререндерит все компоненты, подписанные через useContext(), даже если они не используют изменившуюся часть состояния. В сложных приложениях это приводит к катастрофическому падению производительности.

Механизм проблемы: почему это происходит

React Context — не система управления состоянием, а механизм передачи данных. Когда значение в провайдере меняется, React помечает всех потребителей этого контекста как нуждающихся в обновлении. Проверка "что именно изменилось" отсутствует на уровне движка:

jsx

const App = () => {
  const [state, setState] = useState({
    user: { name: 'Alex' },
    cart: { items: [] }
  });

  return (
    <AppContext.Provider value={state}>
      <Header />
      <ProductPage />
      <ShoppingCart />
    </AppContext.Provider>
  );
};

Обновление любого свойства в state вызовет ререндер Header, ProductPage и ShoppingCart, хотя Header может использовать только user.name, а ShoppingCart — только cart.items.

Стратегии решения

Разделение контекстов

Самая эффективная стратегия — декомпозиция единого контекста на независимые доменные контексты:

jsx

const UserContext = React.createContext();
const CartContext = React.createContext();

const App = () => (
  <UserContext.Provider value={useState({ name: 'Alex' })}>
    <CartContext.Provider value={useState({ items: [] })}>
      <Header />
      <ProductPage />
      <ShoppingCart />
    </CartContext.Provider>
  </UserContext.Provider>
);

Теперь при обновлении корзины перерисуется только ShoppingCart и компоненты, которые реально используют CartContext. Header остается нетронутым.

Мемоизация компонентов

Когда разделение контекстов невозможно, используйте React.memo для предотвращения ререндеров:

jsx

const ExpensiveComponent = React.memo(({ nonContextProp }) => {
  const { state } = useContext(AppContext);
  return <div>{state.data} | {nonContextProp}</div>;
});

// Компонент будет ререндериться ТОЛЬКО при изменении nonContextProp 
// или при изменении state.data (что мы выводим)

Селекторы через хуки

Создайте кастомный хук с селектором для детального контроля подписок:

jsx

const useUser = () => {
  const context = useContext(AppContext);
  return useMemo(() => ({
    user: context.user,
    login: context.login
  }), [context.user, context.login]);
};

Такой подход особенно эффективен в сочетании с React.memo:

jsx

const UserProfile = React.memo(() => {
  const { user } = useUser();
  return <div>{user.name}</div>;
});

Состояние через ссылки

Для часто изменяющихся данных, не требующих ререндеров, используйте связку ref + евент-эмиттер:

jsx

const LiveContext = React.createContext();

const LiveProvider = ({ children }) => {
  const [_, forceUpdate] = useState();
  const stateRef = useRef({
    counters: { a: 0, b: 0 },
    listeners: new Set(),
    notify() {
      this.listeners.forEach(listener => listener());
    }
  });

  useEffect(() => {
    stateRef.current.listeners.add(forceUpdate);
    return () => stateRef.current.listeners.delete(forceUpdate);
  }, []);

  return (
    <LiveContext.Provider value={stateRef.current}>
      {children}
    </LiveContext.Provider>
  );
};

Компоненты могут подписываться на изменения и рендериться только при обращении к конкретным путям данных.

Реальный пример: корзина покупок с оптимизациями

Рассмотрим сценарий: интернет-магазин с частыми обновлениями корзины и статичным профилем пользователя.

jsx

const UserProvider = ({ children }) => (
  <UserContext.Provider value={useUserState()}>
    {children}
  </UserContext.Provider>
);

const CartProvider = ({ children }) => (
  <CartContext.Provider value={useCartState()}>
    {children}
  </CartContext.Provider>
);

const App = () => (
  <UserProvider>
    <CartProvider>
      <AppLayout />
    </CartProvider>
  </UserProvider>
);

const AppLayout = () => (
  <>
    <MemoizedHeader />
    <ProductGrid />
    <MemoizedCart />
  </>
);

const MemoizedHeader = React.memo(() => {
  const { user } = useUser();
  return <Header avatar={user.avatar} />;
});

const MemoizedCart = React.memo(() => {
  const { items } = useCart();
  return <Cart items={items} />;
});

Ключевые оптимизации:

Разделены контексты пользователя и корзины
Контроль ререндеров через React.memo
Использование доменных хуков (useUser, useCart)

Метрики производительности

Без оптимизаций (единый контекст):

text

Total renders: 53
Cart render time: 4.2ms
Header render time: 3.8ms

С оптимизациями: