Для чего используется хук useContext в React?

Хук useContext предоставляет способ доступа к значению контекста React в функциональных компонентах без использования компонента-потребителя (Consumer). Он упрощает получение данных, распространяемых через дерево компонентов, например, тем или параметров локализации.

Основные преимущества:

• Упрощение кода: Устраняет необходимость рендеринг-пропсов для доступа к контексту.
• Чистота: Делает функциональные компоненты более лаконичными и читаемыми.
• Удобство: Легко использовать внутри функциональных компонентов.

Пример использования:

1. Создание контекста:

   // ThemeContext.js
   import { createContext } from 'react';
   
   const ThemeContext = createContext('light'); // Дефолтное значение
   
   export default ThemeContext;
   

2. Предоставление контекста:

   // App.js
   import React from 'react';
   import ThemeContext from './ThemeContext';
   import MyComponent from './MyComponent';
   
   function App() {
     const theme = 'dark';
   
     return (
       // Предоставляем значение theme всем дочерним компонентам
       <ThemeContext.Provider value={theme}>
         <MyComponent />
       </ThemeContext.Provider>
     );
   }
   
   export default App;
   

3. Использование контекста с useContext:

   // MyComponent.js
   import React, { useContext } from 'react';
   import ThemeContext from './ThemeContext';
   
   function MyComponent() {
     // Получаем текущее значение контекста
     const currentTheme = useContext(ThemeContext);
   
     return (
       <div>
         Текущая тема: {currentTheme}
       </div>
     );
   }
   
   export default MyComponent;
   

Таким образом, useContext является мощным инструментом для управления состоянием и данными, которые должны быть доступны многим компонентам в приложении, упрощая их распространение и использование.