Декілька контекстів у застосунку

ReactJunior~1 хв читання

Так - у React можна (і часто потрібно) використовувати декілька контекстів одночасно. Це абсолютно нормальна і рекомендована практика.

Навіщо взагалі декілька контекстів?

Контекст призначений для глобальних даних одного типу - теми, мови, користувача, налаштувань тощо. Якщо все зберігати в одному контексті, вийде "моноліт", де будь-яка зміна призводить до зайвих перерендерів.

Тому краще ділити контексти за зонами відповідальності:

Контекст	Відповідає за
`ThemeContext`	Тема застосунку (light/dark)
`AuthContext`	Авторизація і користувач
`LangContext`	Поточна мова інтерфейсу
`UIContext`	Модалки, сповіщення, layout-стани
`SettingsContext`	Налаштування користувача

Приклад декількох контекстів

javascript

import { createContext, useContext } from "react";

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

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

function Profile() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  return (
    <div className={theme}>
      <h1>Hello, {user.name}!</h1>
      <p>Тема: {theme}</p>
    </div>
  );
}

Тут:

App обгортає компоненти одразу у два провайдери;
Profile отримує обидва значення через два useContext().

Порядок Providers не важливий,

поки кожен з них замикає потрібні компоненти.

javascript

<AuthContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <App />
  </ThemeContext.Provider>
</AuthContext.Provider>

або

javascript

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={user}>
    <App />
  </AuthContext.Provider>
</ThemeContext.Provider>

Обидва варіанти працюватимуть однаково.

Декілька контекстів через `<Context.Consumer>`

Якщо ти працюєш з класами або без хуків:

javascript

<ThemeContext.Consumer>
  {theme => (
    <UserContext.Consumer>
      {user => (
        <p>{user.name} використовує тему {theme}</p>
      )}
    </UserContext.Consumer>
  )}
</ThemeContext.Consumer>

Але це швидко стає громіздким - у функціональних компонентах завжди краще useContext.

Підсумок

Можна і потрібно використовувати декілька контекстів. Кожен контекст - для своєї "області відповідальності". Компонент може споживати скільки завгодно контекстів через useContext. Це покращує структуру, читабельність і продуктивність.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Декілька контекстів у застосунку

#Навіщо взагалі декілька контекстів?

#Приклад декількох контекстів

#Порядок Providers не важливий,

#Декілька контекстів через <Context.Consumer>

#Підсумок

Коротка відповідь

Навіщо взагалі декілька контекстів?

Приклад декількох контекстів

Порядок Providers не важливий,

Декілька контекстів через `<Context.Consumer>`

Підсумок