\section{Hookok}

\begin{frame}{Mi az a Hook?}
  \begin{block}{Az alapgondolat}
    A React 16.8 előtt az állapotkezelés és életciklus-logika csak osztály alapú komponensekben volt lehetséges. A hookok ezt hozták el \textbf{funkcionális komponensekbe} is --- így ma már egyszerűbb szintaxissal írhatunk komplex viselkedést.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item A hook neve mindig \texttt{use}-szal kezdődik (pl. \texttt{useState}, \texttt{useEffect}).
    \item Beépített hookok lefedik a leggyakoribb igényeket: állapot, mellékhatás, kontextus, optimalizálás.
    \item \textbf{Custom hook:} saját logikát csomagolhatunk újrafelhasználható hookba --- pl. \texttt{useWindowSize}, \texttt{useAuth}.
  \end{itemize}
\end{frame}

\begin{frame}{\texttt{useState} --- az alapvető állapot hook}
  \begin{block}{Mit csinál?}
    Az \texttt{useState} lehetővé teszi, hogy egy komponens \textbf{emlékezzen} valamire a renderelések között --- pl. egy számláló értékére, egy modal nyitott/zárt állapotára.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Visszaad egy értéket és egy \textbf{szetter függvényt}: \texttt{const [ertek, setErtek] = useState(kezdoErtek)}.
    \item Ha a szetter meghívódik, a React \textbf{újrarendereli} a komponenst az új értékkel.
    \item A kezdeti érték csak az első renderelésnél számít --- utána React maga kezeli.
  \end{itemize}
\end{frame}

\begin{frame}{\texttt{useReducer} --- összetettebb állapothoz}
  \begin{itemize}
    \item Ha az állapot több összefüggő értékből áll, vagy a frissítési logika bonyolult, \texttt{useReducer} jobb választás lehet.
    \item Működése hasonló a Redux elvéhez: van egy \textbf{akció} (mi történt) és egy \textbf{reducer} függvény (hogyan változik az állapot).
    \item A frissítési logika egy helyen, a reducerben él --- olvashatóbb, tesztelhető.
  \end{itemize}
\end{frame}

\begin{frame}{\texttt{useRef} --- referencia DOM elemre vagy értékre}
  \begin{itemize}
    \item Az \texttt{useRef} olyan értéket tárol, amely \textbf{nem vált ki újrarenderelést} megváltozásakor.
    \item Leggyakoribb használat: közvetlen DOM-elem elérése --- pl. input fókuszálása, video lejátszás indítása.
    \item Hasznos timer ID-k és előző értékek tárolására is: bármire, amit renderelések között „el akarunk menteni" anélkül, hogy az oldal frissüljön.
  \end{itemize}
\end{frame}

\begin{frame}{Hook szabályok --- miért fontosak?}
  \begin{alertblock}{Alapszabályok}
    \begin{enumerate}
      \item Hookot csak \textbf{komponens vagy custom hook legfelső szintjén} hívjunk.
      \item Ne ciklusban, feltételben vagy beágyazott függvényen belül hívjuk.
    \end{enumerate}
  \end{alertblock}
  \vspace{0.5em}
  \begin{itemize}
    \item \textbf{Miért?} A React a hookok \emph{hívási sorrendje} alapján párosítja az állapotokat a komponenshez. Ha a sorrend változik (pl. feltétel miatt kimarad egy hook), React összetéveszti, melyik állapot melyikhez tartozik.
    \item Az ESLint \texttt{eslint-plugin-react-hooks} csomag automatikusan ellenőrzi ezeket.
  \end{itemize}
\end{frame}