React Context не вызывает лишние рендеры

09.05.2025, Ссылка на статью

Очередная статья про React Context и объяснение того, как с ним работать верно для обработки состояния. Статья поясняет, что разработчики предпочитают стейт-менеджеры, например Redux или Zustand вместо того, чтобы разобраться с контекстами.

В базовом примере автор статьи использует контекст для передачи state и setState через контекст без каких либо мемоизаций, и уже в таком сценарии Реакт не делает лишние рендеры компонентов, которые не были затронуты изменением состояния:

const ValueContext = createContext();
 
const Provider = ({ children }) => {
  const [value, setValue] = useState(0);
 
  return (
    <ValueContext.Provider value={{ value, setValue }}>
      {children}
    </ValueContext.Provider>
  );
};

Использование такого контекста позволяет проверить корректность его работы – лишних рендеров не будет. Для примере можно собрать такую же структуру как и в статье:

Для такого примера App и UncontrolledComponent не будут рендерится, т.к. не используют Context Consumer.

Автор считает, что путаница возникает из-за того, что в один контекст складывают все возможные состояния.

Совет по оптимизации

Если передавать дочерние элементы через пропы, например через {children}, то они не будут рендерится при изменении состояния компонента. Данный подход хорошо себя показывает вкупе с React.Context.

Всё это полезно для небольших и средних приложений, а для крупных уже лучше использовать стейт-менеджеры – их проще поддерживать и писать, и в большом приложении мы уже готовы заплатить весом бандла за улучшение DX.