rerender-memo

Umiejętność Claude'a do refaktoryzacji komponentów React. Pokazuje, jak używać React.memo do ekstrakcji drogich obliczeń, aby uniknąć niepotrzebnych renderowań. Zamiast obliczać dane wewnątrz komponentu, wydzielasz je do osobnego, zapamiętanego komponentu — wtedy React pomija renderowanie, gdy props się nie zmienią. Idealnie dla aplikacji, gdzie niektóre komponenty wykonują ciężkie operacje (np. transformacja danych, generowanie ID).

1. Zidentyfikuj komponent, który wykonuje kosztowne obliczenia (np. useMemo z ciężką funkcją) i renderuje je bezwarunkowo, niezależnie od stanu rodzica.

2. Wydziel tę logikę do nowego, osobnego komponentu — opakuj go w React.memo(). Komponent powinien przyjmować tylko dane potrzebne do obliczeń jako props.

3. Przenieś useMemo z obliczeniami do wnętrza nowego zapamiętanego komponentu, aby obliczeń nie uruchamiać, jeśli props się nie zmienią.

4. W komponencie rodzica dodaj warunkowy zwrot (np. if (loading) return Skeleton) PRZED renderowaniem zapamiętanego komponentu — dzięki temu React w ogóle nie wejdzie do jego funkcji, gdy warunek jest spełniony.

5. Przetestuj, czy komponent przestał się renderować niepotrzebnie — użyj React DevTools Profiler, aby potwierdzić, że zapamiętany komponent nie uruchamia się, gdy jego props się nie zmienią.