\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}