useContext - это хук в React, который позволяет функциональным компонентам подписаться на изменения контекста. Он предоставляет способ передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне.

Принцип работы:

Создание контекста: Используется React.createContext() для создания объекта контекста. Этот объект содержит Provider и Consumer (или используется useContext в функциональных компонентах).
Предоставление значения: Provider компонента контекста оборачивает дерево компонентов, которым нужно иметь доступ к значению. Через пропс value передается значение, которое будет доступно всем подписанным компонентам.
Получение значения: useContext(MyContext) вызывается внутри функционального компонента, где MyContext - созданный ранее контекст. Хук возвращает текущее значение контекста. Когда значение контекста меняется, компонент, использующий useContext, автоматически перерисовывается.

Преимущества:

Простота передачи данных: Устраняет необходимость "протаскивать" пропсы через множество промежуточных компонентов (prop drilling).
Глобальное состояние: Удобно для управления глобальным состоянием приложения (например, тема, аутентификация, локализация).
Производительность: React оптимизирует рендер компонентов, которые используют useContext, перерисовывая только те, которые подписаны на изменения данного контекста.

Недостатки:

Сложность отладки: Отследить, откуда приходит значение контекста, может быть сложнее по сравнению с пропсами.
Производительность при частых обновлениях: Если значение контекста обновляется очень часто, это может привести к частым перерисовкам всех подписанных компонентов.

Пример:

jsx

Что такое useContext в React?