Що таке Context в React?

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

Context в React - це механізм, який дозволяє передавати дані через дерево компонентів, не використовуючи props на кожному рівні.

Проблема, яку вирішує Context

Зазвичай дані в React передаються згори вниз через props:

javascript

<App>
  <Header user={user} />
</App>

Але якщо user потрібен компоненту глибоко всередині дерева, доводиться пробрасувати його через усі проміжні компоненти - це називається prop drilling. Context вирішує цю проблему.

import { createContext } from "react";

export const ThemeContext = createContext("light");

2. Обгортаємо компоненти в Provider

javascript

import { ThemeContext } from "./ThemeContext";

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

3. Підписуємося на контекст через useContext

javascript

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}

Ключові елементи

Елемент	Призначення
`createContext(defaultValue)`	Створює контекст з початковим значенням
`<Context.Provider value={...}>`	Робить значення доступним усім дочірнім компонентам
`useContext(Context)`	Дістає поточне значення контексту всередині компонента

Важливо пам'ятати

Усі компоненти, що використовують контекст, будуть перерендерені, якщо значення value зміниться.
Щоб оптимізувати - мемоізуй value:

javascript

const value = useMemo(() => ({ user, setUser }), [user]);
<UserContext.Provider value={value}>...</UserContext.Provider>

Context не замінює глобальні state managers (Redux, Zustand тощо), але підходить для:

теми оформлення (light/dark),
мови інтерфейсу,
поточного користувача,
налаштувань UI.

Просте порівняння

Підхід	Коли використовувати
`props`	Локальні дані, що передаються на 1-2 рівні вниз
`context`	Спільні дані, потрібні в багатьох місцях застосунку
state managers (Redux, Zustand)	Складні стани з логікою, побічними ефектами, кешем тощо

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

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

Premium

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

Що таке Context в React?

Проблема, яку вирішує Context

Як працює Context

Приклад використання

1. Створюємо контекст

2. Обгортаємо компоненти в Provider

3. Підписуємося на контекст через useContext

Ключові елементи

Важливо пам'ятати

Просте порівняння

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