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

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

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

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

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

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

   // MyContext.js
   import React from 'react';
   
   const MyContext = React.createContext('Значение по умолчанию');
   
   export default MyContext;
   

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

   // App.js
   import React from 'react';
   import MyContext from './MyContext';
   import MyComponent from './MyComponent';
   
   function App() {
     const contextValue = 'Привет, мир!';
   
     return (
       <MyContext.Provider value={contextValue}>
         <MyComponent />
       </MyContext.Provider>
     );
   }
   
   export default App;
   

3. Использование контекста в функциональном компоненте:

   // MyComponent.js
   import React, { useContext } from 'react';
   import MyContext from './MyContext';
   
   function MyComponent() {
     const contextValue = useContext(MyContext); // Использование хука useContext
   
     return (
       <div>
         <p>Значение контекста: {contextValue}</p>
       </div>
     );
   }
   
   export default MyComponent;
   

Важные моменты:

• useContext привязан к конкретному экземпляру контекста, созданному с помощью React.createContext.
• Если соответствующий Provider не найден в дереве компонентов, useContext вернет значение по умолчанию, указанное при создании контекста.
• При изменении значения контекста, все компоненты, которые используют useContext с этим контекстом, автоматически перерендериваются.
• Для оптимизации производительности, можно использовать React.memo или useMemo для мемоизации компонентов или значений контекста, если контекст изменяется редко.