frontend elmélet

Frontend_ppt/react_js/performance.tex

@@ -0,0 +1,36 @@
+\section{Teljesítmény}
+
+\begin{frame}{Mi az az újrarenderelés?}
+  \begin{block}{Az alapjelenség}
+    Amikor egy komponens állapota vagy props-a megváltozik, a React \textbf{újrarendereli} azt a komponenst --- és alapértelmezetten az összes gyermekét is. Ez legtöbbször tökéletesen gyors. Nagy és mély fáknál azonban szükségtelen újrarenderelések lassíthatnak.
+  \end{block}
+  \vspace{0.5em}
+  Fontos szabály: \textbf{mérjünk, aztán optimalizáljunk!} Ne alkalmazzunk előre memoizációt ott, ahol valójában nincs probléma.
+\end{frame}
+
+\begin{frame}{React DevTools Profiler}
+  \begin{itemize}
+    \item A React DevTools böngésző-bővítmény beépített \textbf{Profiler} lapján látjuk, hogy melyik komponens hányszor és mennyi ideig rendereledett.
+    \item Felvesszük egy interakció közben a renderelési folyamatot, majd azonosítjuk a lassú vagy felesleges részeket.
+    \item Csak azután nyúljunk optimalizáláshoz, ha a profiler valódi problémát mutat.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Memoizáció --- mit és mikor?}
+  \begin{itemize}
+    \item \textbf{React.memo:} ha egy komponens props-ai nem változnak, ne renderelje újra. Érdemes drága megjelenítésű, sokszor hívott komponenseken alkalmazni.
+    \item \textbf{useMemo:} ha egy számítás nagyon drága (pl. óriási lista szűrése), cache-eljük az eredményt --- csak akkor számítsuk újra, ha a bemenetek megváltoztak.
+    \item \textbf{useCallback:} ha egy függvényt props-ként adunk át, és fontos, hogy a referenciája stabil maradjon (pl. React.memo-val védett gyermeknek).
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Kódfelosztás és lusta betöltés}
+  \begin{block}{A probléma}
+    Nagy alkalmazásoknál a teljes JavaScript csomag egyszerre töltődik be --- ez lassítja az első megjelenést.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item \textbf{React.lazy + Suspense:} az egyes oldalakat/modulokat csak akkor töltjük be, amikor a felhasználó ténylegesen odanavigál.
+    \item \textbf{Lista virtualizáció} (pl. \texttt{react-window}): ha több ezer listaelemet kell megjeleníteni, csak a látható elemeket rendereljük --- a többi DOM-ban sem szerepel.
+  \end{itemize}
+\end{frame}