Čo je useContext v React?

useContext - je hák v React, ktorý umožňuje funkčným komponentom prihlásiť sa na zmeny v kontexte. Poskytuje spôsob prenosu dát cez strom komponentov bez potreby explicitne prenášať props na každej úrovni.

Princíp fungovania:

1. Vytvorenie kontextu: Používa sa React.createContext() na vytvorenie objektu kontextu. Tento objekt obsahuje Provider a Consumer (alebo sa používa useContext vo funkčných komponentoch).
2. Poskytnutie hodnoty: Provider komponent kontextu obklopí strom komponentov, ktorým je potrebné mať prístup ku hodnote. Prostredníctvom prop value sa odovzdá hodnota, ktorá bude dostupná všetkým prihláseným komponentom.
3. Získanie hodnoty: useContext(MyContext) sa volá vo vnútri funkčnej komponenty, kde je MyContext vytvorený skôr. Hák vráti aktuálnu hodnotu kontextu. Keď sa hodnota kontextu zmení, komponent, ktorý používa useContext, sa automaticky prekreslí.

Výhody:

• Jednoduché prenos dát: Odstraňuje potrebu "pretiahnutia" props cez množstvo medzičiastkových komponentov (prop drilling).
• Globálny stav: Vhodné na správu globálneho stavu aplikácie (napríklad tému, autentifikáciu, lokalizáciu).
• Výkon: React optimalizuje renderovanie komponentov, ktoré používajú useContext, prekresľujúc iba tie, ktoré sú prihlásené na zmeny tohto kontextu.

Nevýhody:

• Zložitosť ladenia: Sledovanie, odkiaľ prichádza hodnota kontextu, môže byť zložitejšie v porovnaní s props.
• Výkon pri častých aktualizáciách: Ak sa hodnota kontextu aktualizuje veľmi často, môže to viesť k častým prekresleniam všetkých prihlásených komponentov.

Príklad:

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

// 1. Vytvorenie kontextu
const ThemeContext = createContext('light');

// Komponenta-poskytovateľ
function ThemeProvider({ children }) {
  const theme = 'dark'; // Príkladová hodnota
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

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

// Použitie
function App() {
  return (
    <ThemeProvider> {/* 2. Poskytnutie hodnoty */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;