Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить `useContext()`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Хук **`useContext()`** дозволяє дістати значення з контексту React, яке було передане через компонент `<Context.Provider>` десь вище по дереву. **Ключове:** `useContext` дозволяє компоненту "дотягнутися" до спільних даних без передачі їх через props.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що робить `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 | | Що повертає | Поточне значення контексту | | Приклади використання | Тема оформлення, мова, користувач, налаштування, стан авторизації |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.