16. React.memo — optymalizacja przez memoizację komponentów

React.memo — pomijaj zbędne re-rendery

React.memo to Higher Order Component owijający komponent funkcyjny. Przed re-renderem React porównuje poprzednie i nowe props (shallow comparison). Jeśli są równe — render jest pomijany. Używany z useCallback dla stabilnych funkcji w props.

Bez memoizacji każdy re-render rodzica powoduje re-render wszystkich dzieci — nawet gdy ich props się nie zmieniły. Przy dużych listach produktów lub dashboardach to znacząco spowalnia aplikację.

1. Wyjaśnić kiedy React re-renderuje komponenty potomne
2. Opisać jak React.memo działa (shallow comparison props)
3. Pokazać połączenie React.memo + useCallback
4. Omówić kiedy NIE używać memo

1. Problem zbędnych re-renderów — rodzic zmienia state A, dziecko używa tylko B
2. React.memo HOC — owijanie, shallow comparison, custom comparator
3. Shallow comparison — co to jest, jakie dane porównuje poprawnie
4. Połączenie z useCallback — dlaczego memo nie działa bez stabilnych funkcji
5. Kiedy NIE memo — małe komponenty, overhead porównań

• Struktura minimalna

1. Wstęp — problem zbędnych re-renderów
2. Rozdział 1: React.memo — mechanizm, shallow comparison
3. Rozdział 2: Pułapka niestabilnych referencji — useCallback
4. Rozdział 3: Kiedy stosować, kiedy nie
5. Podsumowanie
6. Bibliografia

Profiluj, nie zgaduj!

Pokaż przykład przed i po memoizacji z licznikiem renderów (console.count('render')). Konkretne liczby są bardziej przekonujące niż teoria.