07. useMemo — memoizacja kosztownych obliczeń

useMemo — zapamiętaj kosztowny wynik

useMemo memoizuje wynik kosztownego obliczenia — przelicza go tylko gdy zmienią się zależności. Typowe zastosowania: filtrowanie/sortowanie dużej listy, skomplikowane obliczenia matematyczne, transformacje danych. Zasada: useMemo dla wartości, useCallback dla funkcji.

Bez useMemo każde renderowanie komponentu powoduje przeliczenie wszystkich obliczeń — nawet gdy dane się nie zmieniły. Przy liście 10000 elementów z filtrem, bez memoizacji filtrowanie odpala się przy każdej interakcji.

1. Wyjaśnić problem re-kalkulacji przy każdym renderze
2. Opisać jak useMemo memoizuje wyniki
3. Pokazać typowy use case: filtrowanie i sortowanie list
4. Omówić kiedy useMemo NIE jest potrzebny (nie przedwcześnie optymalizuj!)

1. Problem — kosztowne obliczenie odpala się przy każdym renderze (nawet nieistotnym)
2. useMemo API — useMemo(() => expensiveCalc(), deps) — przelicza gdy deps się zmienią
3. Filtrowanie listy — klasyczny przykład: products.filter(...) wrappowany w useMemo
4. Dependency array — jakie wartości należy dodać
5. Kiedy NIE używać — małe tablice, proste obliczenia, overhead memoizacji

• Struktura minimalna

1. Wstęp — co to jest memoizacja ogólnie
2. Rozdział 1: Problem re-kalkulacji — dlaczego to kosztuje
3. Rozdział 2: useMemo API i przykłady — filtrowanie, obliczenia
4. Rozdział 3: Kiedy używać — zasady, pomiar vs zgadywanie
5. Podsumowanie
6. Bibliografia

Optymalizacja zaczyna się od pomiaru!

Najważniejsze zdanie w Twoim opracowaniu: “Nie optymalizuj bez dowodów z profilera”. useMemo to narzędzie, nie nawyk.