frontend elmélet

Frontend_ppt/react_js/effects.tex

@@ -0,0 +1,43 @@
+\section{Mellékhatások}
+
+\begin{frame}{Mi az a mellékhatás (side effect)?}
+  \begin{block}{Definí­ció}
+    Mellékhatásnak nevezzük mindazt, ami a komponens \textbf{renderelésén kívül} történik: hálózati kérés, DOM-módosítás, timer beállítása, eseménykezelő regisztrálása.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item A renderelési fázisban ilyen műveletek nem végzhetők --- a React elvárja, hogy a renderelés \textbf{tiszta} (mellékhatásmentes) legyen.
+    \item A \texttt{useEffect} hook nyújtja a lehetőséget arra, hogy e műveleteket \emph{renderelés után} hajtsuk végreh.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{\texttt{useEffect} --- mikor és hányszor fut le?}
+  \begin{itemize}
+    \item \textbf{Függőségi történk:} minden egyes renderelés után lefut --- általában nem ezt akarjuk.
+    \item \textbf{Üres történk (\texttt{[]}):} csak az első megjelenítéskor fut le egyszer --- pl. induló adatlekéréshez.
+    \item \textbf{Értékekkel (\texttt{[id, szuro]}):} amikor a felsorolt értékek bármelyike megváltozik, újra lefut.
+  \end{itemize}
+  \vspace{0.4em}
+  A függőségi történk tehát azt szabályozza, \textbf{mikor} akarjuk az effektet ismét futtatni.
+\end{frame}
+
+\begin{frame}{Cleanup --- takarítás az effect után}
+  \begin{block}{Miért kell cleanup?}
+    Ha egy komponens eltűnik az oldalról (pl. navigáció közben), az esetlegesen elindított timerek, eseményfigyelők tovább futnak, memóriaszivárgást okozva. A cleanup függvény ezt akadályozza meg.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item Az effect \textbf{visszaadhat egy cleanup függvényt}: ez fut le a komponens unmountjakor, illetve az effect következő lefutása előtt.
+    \item Tipikus eset: \texttt{clearInterval}, \texttt{removeEventListener}, API kérés megszakítása (\texttt{AbortController}).
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Leggyakoribb hibák \texttt{useEffect}-tel}
+  \begin{alertblock}{Figyelem}
+    \begin{itemize}
+      \item \textbf{Hiányzó dependency:} ha egy változót használunk de nem szerepel a tömbben, a hook régi értékkel dolgozhat --- ez nehezen felderíthető hiba.
+      \item \textbf{Végtelen ciklus:} ha az effect frissít egy állapotot, ami maga is dependency, kör forgás indul.
+      \item \textbf{Túl sok logika egy effectben:} egy effect egy felelősséget kezeljen; ha kettőt kezelne, bontsuk szét.
+    \end{itemize}
+  \end{alertblock}
+\end{frame}