Що таке context та хук useContext у React

Контекст у React — це спосіб передавати дані між компонентми на будь-якому рівні вкладеності, обходячи ручну передачу пропсів (props) через кожен рівень дерева.

Контекст зручний, коли певні дані (наприклад, поточний користувач, мова, тема) потрібні у багатьох компонентх одночасно.

Чому Контекст?

Уникає пропс-дрилінгу — необхідності передавати дані через кілька проміжних компонентів.
Дозволяє зручно працювати з глобальними даними:
Авторизація
Тема (світла / темна)
Локалізація
Налаштування програми

Приклад Використання Context API

Створення Контексту

jsx

import { createContext } from "react";

const ThemeContext = createContext("light");

Обгортання Компонентів у Провайдер

jsx

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Читання Даних за Допомогою useContext

jsx

import { useContext } from "react";

function Header() {
  const theme = useContext(ThemeContext);
  return <h1 className={`header ${theme}`}>Hello!</h1>;
}

Тепер компонент Header знає, що тема "темна", без пропсів!

useContext: як це працює?

jsx

const value = useContext(ContextObject);

Дозволяє отримати поточне значення контексту
Працює тільки всередині компонент, обгорнутого в Context.Provider
Автоматично оновлюється, коли значення в Provider змінюється

ThemeContext.Provider

Компонент Header

Компонент Sidebar

Хук useContext

Приклад Перемикання Теми

jsx

const ThemeContext = createContext("light");

function ThemeSwitcher() {
  const theme = useContext(ThemeContext);
  return <button className={`btn-${theme}`}>Switch theme</button>;
}

Коли Не Використовувати Контекст

Для часто оновлюваних значень (наприклад, поточне значення вводу)
Коли дані можна передати безпосередньо через пропси (контекст = "важка артилерія")

Підсумок

Контекст потрібен для зручного обміну даними між компонентми без надмірної передачі пропсів.
Хук useContext дозволяє легко отримувати значення контексту.
Підходить для теми, мови, налаштувань користувача, глобального стану.

Порада:

Використовуйте контекст для даних, які потрібні багатьом компонентм і рідко змінюються.

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

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

Premium

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

Дочитали статтю?

Практика завдань