Mi az a useContext a React-ben?

useContext egy hook a Reactben, amely lehetővé teszi a funkcionális komponensek számára, hogy feliratkozzanak a kontextus változásaira. Ez egy módja annak, hogy adatokat továbbítsunk a komponensfa mentén anélkül, hogy explicit módon propsokat kellene átadni minden szinten.

Működési elv:

1. A kontextus létrehozása: A React.createContext() használatával hozunk létre egy kontextus objektumot. Ez az objektum tartalmaz egy Provider-t és egy Consumer-t (vagy useContext-et funkcionális komponensekben).
2. Érték biztosítása: A kontextus Provider komponense körülveszi azokat a komponenseket, amelyek hozzáférést kell, hogy kapjanak az értékhez. Az értéket a value prop-on keresztül adjuk át, amely elérhető lesz minden feliratkozott komponens számára.
3. Érték lekérése: A useContext(MyContext) hívás egy funkcionális komponensen belül történik, ahol MyContext az előzőleg létrehozott kontextus. A hook visszaadja a kontextus aktuális értékét. Amikor ez az érték változik, a useContext-et használó komponens automatikusan újrarenderelődik.

Előnyök:

• Adatok könnyű átadása: Kiváltja a "prop drilling"-t több közbenső komponensen keresztül.
• Globális állapot: Hasznos az alkalmazás globális állapotának kezelésében (pl. téma, hitelesítés, lokalizáció).
• Teljesítmény: A React optimalizálja a useContext-et használó komponensek újrarenderelését, csak azokat, amelyek feliratkoztak a változásokra.

Hátrányok:

• Hibakeresés nehézsége: Nehezebb lehet nyomon követni, hogy honnan származik a kontextus értéke, összehasonlítva a props-okkal.
• Teljesítmény gyakori frissítéseknél: Ha a kontextus értéke nagyon gyakran frissül, az gyakori újrarendereléseket eredményezhet minden feliratkozott komponensnél.

Példa:

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

// 1. Kontextus létrehozása
const ThemeContext = createContext('light');

// Szolgáltató komponens
function ThemeProvider({ children }) {
  const theme = 'dark'; // Példaérték
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Kontextust használó komponens
function ThemedComponent() {
  // 3. A kontextus értékének lekérése
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Téma: {theme}</div>;
}

// Alkalmazás
function App() {
  return (
    <ThemeProvider> {/* 2. Érték biztosítása */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;