Які проблеми вирішує Context?

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

1. Проблема prop drilling

Коли потрібно передати одне й те саме значення (наприклад, user, theme, lang) углиб дерева компонентів, доводиться передавати його через усі рівні вручну - навіть якщо проміжним компонентам воно не потрібне.

Без Context:

javascript

function App() {
  const user = { name: "Tim" };
  return <Layout user={user} />;
}

function Layout({ user }) {
  return <Header user={user} />;
}

function Header({ user }) {
  return <UserMenu user={user} />;
}

function UserMenu({ user }) {
  return <p>Привіт, {user.name}</p>;
}

Мінуси:

купу компонентів доводиться "проколювати" user, хоча він їм не потрібен;
якщо структура змінюється, потрібно міняти пропси всюди;
код стає шумним і важким у підтримці.

2. Як Context вирішує це

Context дозволяє створити глобальне джерело даних, до якого можна отримати доступ з будь-якого місця в дереві без пропсів.

javascript

const UserContext = createContext();

function App() {
  const user = { name: "Tim" };
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

function UserMenu() {
  const user = useContext(UserContext);
  return <p>Привіт, {user.name}</p>;
}

Тепер UserMenu напряму бере user з контексту - без посередників.

3. Типові сценарії, де Context корисний

Проблема	Рішення через Context
Передача теми оформлення (dark/light)	`ThemeContext`
Мова інтерфейсу / локалізація	`LanguageContext`
Поточний користувач (auth)	`AuthContext`
Налаштування застосунку / конфіг	`SettingsContext`
Глобальні дані UI (наприклад, модалки, сповіщення)	`UIContext`

4. Що Context не вирішує

Не призначений для складного стану, логіки чи асинхронних даних.
Не оптимізований для частих оновлень стану (кожна зміна value спричиняє ререндер усіх споживачів). У таких випадках краще використовувати Redux, Zustand, Jotai, Recoil тощо.

Підсумок

Context вирішує:

Проблему "prop drilling" - позбавляє від зайвої передачі props.
Дозволяє централізовано зберігати спільні дані.
Робить код чистішим і простішим у супроводі.

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

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

Premium

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

Які проблеми вирішує Context?

#1. Проблема prop drilling

#Без Context:

#2. Як Context вирішує це

#3. Типові сценарії, де Context корисний

#4. Що Context не вирішує

#Підсумок