Що робить `useContext()`?

ReactMiddle~2 хв читання

Що робить `useContext()`

Хук useContext() дозволяє дістати значення з контексту React, яке було передане через компонент <Context.Provider> десь вище по дереву.

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

Як це працює (крок за кроком)

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

javascript

import { createContext } from "react";

export const ThemeContext = createContext("light");

createContext() створює об'єкт контексту з методом .Provider і .Consumer.

2. Обгортаємо частину застосунку в `Provider`

javascript

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

Усе, що знаходиться всередині <ThemeContext.Provider>, отримає доступ до значення "dark".

3. Отримуємо значення контексту в будь-якому вкладеному компоненті через `useContext`

javascript

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

function Button() {
  const theme = useContext(ThemeContext);

  return <button className={theme}>Тема: {theme}</button>;
}

Тепер Button знає, яка тема обрана (dark), хоча ніхто явно не передавав цей проп!

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

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

javascript

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Перемкнути тему (поточна: {theme})
    </button>
  );
}

Тепер будь-яка кількість компонентів може читати і змінювати тему, без прокидання props через кожен рівень.

Коли використовувати `useContext`

Коли	Чому
Дані потрібні в багатьох компонентах	Наприклад, поточний користувач, мова, тема, налаштування
Не хочеться передавати props вручну	`useContext` прибирає "проп-дрилінг"
Потрібен глобальний "стейт" без Redux чи Zustand	Контекст + `useState` = проста глобальна логіка

Важливо знати

Особливість	Пояснення
`useContext` оновлює компонент при зміні значення контексту	Якщо `value` змінився, усі підписники перемалюються
Контекст не кешується як `useMemo`	Оновлення передаються синхронно
Контекст не можна викликати поза `Provider`	Інакше значення буде з `createContext(defaultValue)`
Контексти можна вкладати	React коректно їх об'єднує

Відмінність від props

Пропси	useContext
Передаються згори вниз вручну	Автоматично доступні всім нащадкам
Працюють локально	Працюють глобально в межах `Provider`
Гнучкіші й прозоріші	Зручніші для глобальних даних

Підсумок

Питання	Відповідь
Що робить `useContext()`	Дозволяє отримати доступ до значення з найближчого `Context.Provider`
Коли використовувати	Коли потрібно ділитися спільними даними між компонентами без props
Що повертає	Поточне значення контексту
Приклади використання	Тема оформлення, мова, користувач, налаштування, стан авторизації

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

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

Premium

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