rerender-memo
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
How to use
Zidentyfikuj komponent, który wykonuje kosztowne obliczenia (np. useMemo z ciężką funkcją) i renderuje je bezwarunkowo, niezależnie od stanu rodzica.
Wydziel tę logikę do nowego, osobnego komponentu — opakuj go w React.memo(). Komponent powinien przyjmować tylko dane potrzebne do obliczeń jako props.
Przenieś useMemo z obliczeniami do wnętrza nowego zapamiętanego komponentu, aby obliczeń nie uruchamiać, jeśli props się nie zmienią.
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.
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ą.