GKNB_MSTM071/Frontend_ppt/react_js/context.tex

\section{Context}

\begin{frame}{A prop drilling probléma}
  \begin{block}{Mi az a prop drilling?}
    Ha egy adat a komponensfa tetején él, de csak mélyen lent lévő komponensnek kell, akkor az összes közbülső komponensen át kell „ütni" props-szal --- még akkor is, ha a köztes komponensek maguk nem használják. Ez nehézkessé és törékennyé teszi a kódot.
  \end{block}
  \vspace{0.5em}
  A \textbf{Context API} ezt a problémát oldja meg: az adatot egy közös „kút"-ban tároljuk, amelyből bármely leszármazott komponens közvetlen props nélkül is ihat.
\end{frame}

\begin{frame}{Mire jó a Context API?}
  \begin{itemize}
    \item \textbf{Ritkán változó, globális adatok} átadásához ideális --- pl. téma (dark/light), aktív nyelv, bejelentkezett felhasználó adatai.
    \item Két lépés: 1) \textbf{Provider} --- közzéteszi az értéket a fában; 2) \textbf{useContext} --- olvasásra foglalja le a komponensben.
    \item Nem teljes értékű állapotkezelő: sűrűn változó adatokhoz ne használjuk, mert minden fogyasztó komponens újrarenderelődik.
  \end{itemize}
\end{frame}

\begin{frame}{A Context és a Provider szerepe}
  \begin{block}{Context}
    A \texttt{createContext} egy konténer, amely az adatot tárolja. Maga nem csinál semmit --- csak definiálja, hogy melyik adat lesz megosztva.
  \end{block}
  \vspace{0.4em}
  \begin{block}{Provider}
    A \texttt{Provider} egy komponens, amely körülvesz más komponenseket, és az értéket \textbf{elérhetővé teszi} számukra. Minden komponens, amely a Provider-ben van, felhasználhatja az adatot.
  \end{block}
\end{frame}

\begin{frame}[fragile]{Context és Provider --- alapvető kódpélda}
\begin{verbatim}
import { createContext, useContext } from "react";

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

// 2. Provider komponens a legfelső szinten
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Context és Provider --- alapvető kódpélda folytatás}
\begin{verbatim}
// 3. Leszármazott komponensben: useContext
function Header() {
  const theme = useContext(ThemeContext);
  return <h1>Tema: {theme}</h1>;
}
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Állapottal rendelkező Context --- teljesebb példa}
\footnotesize\begin{verbatim}
// ThemeContext.js
const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Felhasználás az alkalmazásban}
\begin{verbatim}
// App.js
import { ThemeProvider } from "./ThemeContext";

function App() {
  return (
    <ThemeProvider>
      <Header />
      <MainContent />
    </ThemeProvider>
  );
}
\end{verbatim}
\end{frame}
\begin{frame}[fragile]{Felhasználás az alkalmazásban folytatás}
\begin{verbatim}
// Header.js
function Header() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Aktualis tema: {theme}
    </button>
  );
}
\end{verbatim}
\end{frame}

\begin{frame}{Hogyan működik a gyakorlatban?}
  \begin{itemize}
    \item \texttt{createContext()} a kontextus objektumot hozza létre.
    \item A \texttt{Provider} értéket ad át a \texttt{value} prop-on.
    \item Mélyen lent elhelyezkedő komponensek a \texttt{useContext()} hookkal használják az adatot.
    \item Custom hook (pl. \texttt{useTheme()}) felhasználóbarátabb API-t nyújt.
  \end{itemize}
\end{frame}

\begin{frame}{Jó gyakorlatok és gyakori hibák}
  \begin{itemize}
    \item \textbf{Custom hook:} szokjunk meg a saját hook megírásának (pl. \texttt{useTheme}), ez takarítja a kódot és segíti az újrafelhasználást.
    \item \textbf{Túl nagy Context:} ha túl sok adat van egy Context-ben, minden frissítés újrarendereli az összes fogyasztót --- inkább bontsuk fel több kisebb Context-re.
    \item \textbf{nem Context-ben való adat:} gyorsan változó, nagy mennyiségű adat (pl. valós idejű pozíciók) nem Context-ben való --- inkább store (Redux, Zustand) vagy külön state.
    \item \textbf{Default érték:} adjunk adjunk értelmes \texttt{createContext()} paraméterét --- dev módban segít descobrire a hiányzó Providert.
  \end{itemize}
\end{frame}

\begin{frame}{Context vs. más megoldások}
  \begin{itemize}
    \item \textbf{Props:} egyszerű, néhány szintű adatátadásra. Érthető, explicit.
    \item \textbf{Context:} ritkán változó, globális adatok. Szétszórt komponensek között.
    \item \textbf{State Manager (Redux/Zustand):} komplett üzleti logika, komplex frissítések, szinkronizálás.
    \item \textbf{Szerverállapot (TanStack Query):} API-ból érkező adatok, cache, szinkronizálás.
  \end{itemize}
\end{frame}