\section{Állapotkezelés}

\begin{frame}{Mi az állapot (state)?}
  \begin{block}{Analógia: a komponens "emlékezete"}
    Az állapot az, amit a komponens \textbf{megjegyez} renderelések között. Gondoljunk rá úgy, mint egy cetlire, amire a komponens feljegyzi az aktuális értékeit --- hány termék van a kosárban, be van-e jelentkezve a felhasználó, milyen szöveg van az input mezőben.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Az állapot megváltozásakor a React \textbf{automatikusan újrarendereli} az érintett komponenst.
    \item Az állapot a komponensen \emph{belül} él --- más komponens nem látja közvetlenül.
  \end{itemize}
\end{frame}

\begin{frame}{Állapot típusok a gyakorlatban}
  \begin{itemize}
    \item \textbf{Lokális UI állapot:} csak egy komponenst érint --- pl. le van-e hajtva egy dropdown, aktív-e egy fül.
    \item \textbf{Megosztott állapot:} több komponens is olvas vagy ír belőle --- pl. a bejelentkezett felhasználó neve.
    \item \textbf{Szerverállapot:} API-ból érkező, kiszolgálón élő adat, amelyet le kell kérni és szinkronban kell tartani.
    \item \textbf{URL állapot:} az aktuális útvonal, query paraméterek --- természetesen megosztható és könyvjelzőzhető.
  \end{itemize}
\end{frame}

\begin{frame}{Egyirányú adatfolyam}
  \begin{block}{Mi ez pontosan?}
    Reactben az adatok mindig \textbf{szülőtől gyermek felé} áramlanak (props-on keresztül). A gyermek \emph{nem módosíthatja} a szülő állapotát közvetlenül --- csak egy callback függvényen (eseménykezelőn) keresztül jelezhet vissza.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Ezért kiszámítható: mindig tudjuk, honnan ered egy érték.
    \item Hibakeresés könnyebb --- az adatfolyamot felfelé haladva követhetjük.
  \end{itemize}
\end{frame}

\begin{frame}{State emelés (Lifting State Up)}
  \begin{itemize}
    \item Ha két testvérkomponensnek ugyanazt az adatot kell látnia, az állapotot a legközelebbi közös ősbe \textbf{emeljük fel}.
    \item Az ős kezeli az állapotot, és props-on keresztül osztja szét a gyermekek között.
    \item \textbf{Példa:} egy szűrő mező és egy lista --- mindkettőnek ugyanaz a szűrési feltétel kell, ezért azt a szülőben tároljuk.
  \end{itemize}
\end{frame}

\begin{frame}{Mikor kell külső állapotkezelő?}
  \begin{itemize}
    \item Ha az állapot emelése sok szinten keresztül megy, és a köztes komponensek csak "átpasszolják" --- ezt hívjuk \textbf{prop drilling}-nek.
    \item Ha az állapot nagyon sok helyen kell, és bonyolult szinkronizálás szükséges.
    \item Külső megoldások: \textbf{Redux Toolkit} (nagy, komplex alkalmazásokhoz), \textbf{Zustand} (könnyű, egyszerű API), \textbf{Jotai} (atomi, finomhangolt).
    \item Legtöbb esetben a beépített eszközök (useState + Context) elegendők --- ne bonyolítsuk túl.
  \end{itemize}
\end{frame}