Что такое useContext

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

В React контекст используется для передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий пользователь, тема или настройки локализации.

useContext — это хук, который позволяет компонентам подписываться на изменения контекста. Он упрощает доступ к данным контекста, устраняя необходимость в обертке компонентов в Consumer.

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

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

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

   import React, { createContext, useContext } from 'react';
   ​
   // Создаем контекст с темой по умолчанию
   const ThemeContext = createContext('light');
   

   • createContext('light'): Создает контекст с темой по умолчанию 'light'. Это значение будет использоваться, если компонент не обернут в Provider.

2. Использование Provider для предоставления значения контекста

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

   • ThemeContext.Provider: Компонент, который предоставляет значение контекста всем дочерним компонентам. В данном случае, тема 'dark' будет доступна всем компонентам внутри Toolbar.

3. Доступ к контексту с помощью useContext

   function Toolbar() {
     return (
       <div>
         <ThemedButton />
       </div>
     );
   }
   ​
   function ThemedButton() {
     // Используем useContext для получения текущей темы
     const theme = useContext(ThemeContext);
   ​
     return <button className={theme}>I am styled by theme context!</button>;
   }
   

   • useContext(ThemeContext): Хук, который возвращает текущее значение контекста. В данном случае, theme будет равен 'dark', так как это значение было предоставлено в ThemeContext.Provider.
   • <button className={theme}>: Кнопка, которая использует тему для установки класса, что позволяет стилизовать ее в зависимости от текущей темы.

Зачем нужен useContext

• Упрощение кода: Устраняет необходимость в обертке компонентов в Consumer, делая код более читаемым и простым.
• Управление состоянием: Позволяет легко управлять глобальным состоянием, таким как тема или аутентификация, без необходимости пробрасывать пропсы через множество уровней.
• Повышение производительности: Изменения в контексте вызывают перерисовку только тех компонентов, которые используют этот контекст, что может улучшить производительность приложения.

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