Какво е useContext в React?

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

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

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

Предимства:

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

Недостатъци:

• Трудност при дебъгване: Следенето откъде идва стойността на контекста може да е по-трудно в сравнение с пропсите.
• Производителност при чести актуализации: Ако стойността на контекста се обновява много често, това може да доведе до чести прерисувания на всички абонирани компоненти.

Пример:

import React, { createContext, useContext } from 'react';

// 1. Създаване на контекст
const ThemeContext = createContext('light');

// Компонент-провайдер
function ThemeProvider({ children }) {
  const theme = 'dark'; // Примерна стойност
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Компонент, използващ контекста
function ThemedComponent() {
  // 3. Получаване на стойността на контекста
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Тема: {theme}</div>;
}

// Използване
function App() {
  return (
    <ThemeProvider> {/* 2. Предоставяне на стойност */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;