Co je useContext v Reactu?

useContext je hook v Reactu, který umožňuje funkčním komponentám přihlásit se ke změnám v kontextu. Poskytuje způsob, jak předávat data přes strom komponent bez nutnosti explicitně předávat props na každé úrovni.

Princip fungování:

1. Vytvoření kontextu: Používá se React.createContext() k vytvoření objektu kontextu. Tento objekt obsahuje Provider a Consumer (nebo se používá useContext ve funkčních komponentách).
2. Poskytnutí hodnoty: Provider kontextu obaluje strom komponent, které potřebují přístup k hodnotě. Hodnota je předána přes prop value a je dostupná všem přihlášeným komponentám.
3. Získání hodnoty: useContext(MyContext) se volá uvnitř funkční komponenty, kde MyContext je dříve vytvořený kontext. Hook vrací aktuální hodnotu kontextu. Pokud se hodnota kontextu změní, komponenta, která používá useContext, se automaticky znovu vykreslí.

Výhody:

• Snadné předávání dat: Odstraňuje potřebu "prop drilling" přes více mezilehlých komponent.
• Globální stav: Užitečné pro správu globálního stavu aplikace (například téma, autentizace, lokalizace).
• Výkon: React optimalizuje znovu-renderování komponent, které používají useContext, a re-renderuje pouze ty, které jsou přihlášeny ke změnám daného kontextu.

Nevýhody:

• Složitost ladění: Může být složitější sledovat, odkud pochází hodnota kontextu ve srovnání s props.
• Výkon při častých aktualizacích: Pokud se hodnota kontextu aktualizuje velmi často, může to vést k častým znovu-renderováním všech přihlášených komponent.

Příklad:

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

// 1. Vytvoření kontextu
const ThemeContext = createContext('light');

// Poskytovatel
function ThemeProvider({ children }) {
  const theme = 'dark'; // Příkladová hodnota
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Komponenta využívající kontext
function ThemedComponent() {
  // 3. Získání hodnoty z kontextu
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Téma: {theme}</div>;
}

// Aplikace
function App() {
  return (
    <ThemeProvider> {/* 2. Poskytnutí hodnoty */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;