Можно ли вкладывать один контекст в другой?

Вложенность контекстов в React

В React контексты можно вкладывать один в другой. Это означает, что вы можете иметь несколько Provider компонентов, обернутых друг в друга, каждый из которых предоставляет свое значение. Дочерние компоненты могут получать доступ к любому из этих контекстов, используя соответствующий хук useContext или Consumer.

Как это работает

Когда компонент вызывает useContext(MyContext), React ищет ближайший Provider этого контекста в дереве компонентов. Если Provider не найден, используется значение по умолчанию, переданное в createContext. Вложенные контексты разных типов не влияют друг на друга, но если вы вкладываете Provider одного и того же контекста, внутренний Provider переопределяет значение для своих дочерних элементов.

Пример кода

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');
const UserContext = createContext({ name: 'Guest' });

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Alice' }}>
        <MainContent />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function MainContent() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  return <p>{user.name} использует {theme} тему</p>;
}

Практическое применение

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

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