06. useCallback — memoizacja funkcji w React

useCallback — ta sama funkcja między renderami

useCallback zwraca memoizowaną wersję funkcji, która zmienia się tylko gdy zmienią się jej zależności. Bez memoizacji — każdy render tworzy nową referencję funkcji, co sprawia że React.memo na komponentach potomnych nie działa. Używać z głową — przedwczesna optymalizacja szkodzi.

useCallback jest najczęściej używany razem z React.memo — gdy przekazujesz handler do zmemoizowanego dziecka, musisz zagwarantować stabilną referencję funkcji. Bez useCallback React.memo jest bezużyteczny.

1. Wyjaśnić problem niestabilnych referencji funkcji w React
2. Opisać jak useCallback memoizuje funkcje
3. Pokazać typowy przypadek użycia: React.memo + useCallback
4. Omówić kiedy useCallback NIE jest potrzebny

1. Problem — każdy render = nowa funkcja = nowa referencja = React.memo bezużyteczny
2. useCallback API — useCallback(fn, deps) — zwraca tę samą funkcję dopóki deps nie zmienią się
3. React.memo + useCallback — dlaczego jedno nie działa bez drugiego
4. Dependency array — jakie wartości dodać do deps
5. Kiedy NIE używać — proste przypadki, zbyt wiele komponentów

• Struktura minimalna

1. Wstęp — problem referencji funkcji w JS (funkcje to obiekty)
2. Rozdział 1: useCallback basics — API, dependency array
3. Rozdział 2: React.memo + useCallback — kompletny przykład
4. Rozdział 3: Kiedy używać, kiedy nie — zasady decyzyjne
5. Podsumowanie
6. Bibliografia

useCallback ma sens tylko z React.memo!

Pokaż w opracowaniu że rozumiesz interakcję między useCallback i React.memo. Przeprowadź czytelnika od problemu (niestabilne referencje) przez rozwiązanie (memoizacja) do wniosku (używaj gdy mierzysz problem).