Šta je useContext u Reactu?

useContext - је хук у React-у који омогућава функционалним компонентама да се претплате на промене у контексту. Он пружа начин преноса података кроз дрво компоненти без потребе да експлицитно преносите пропсе на сваком нивоу.

Принцип рада:

1. Креирање контекста: Користи се React.createContext() за креирање објекта контекста. Овај објекат садржи Provider и Consumer (или се користи useContext у функционалним компонентама).
2. Обезбеђивање вредности: Provider компонента контекста обавија дрво компоненти којима је потребан приступ вредности. Преко пропса value се преноси вредност која ће бити доступна свим претплаћеним компонентама.
3. Добијање вредности: useContext(MyContext) се позива унутар функционалне компоненте, где је MyContext претходно креирани контекст. Хук враћа тренутну вредност контекста. Када се вредност контекста промени, компонентa која користи 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;