rendering-hoist-jsx
Wyciągaj statyczne elementy JSX poza komponenty i unikaj ich przebudowy przy każdym renderowaniu.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill optymalizuje wydajność komponentów React poprzez ekstrakcję statycznych elementów JSX na poziom modułu. Zamiast odtwarzać ten sam element przy każdym renderowaniu, definiujesz go raz poza komponentem i reużywasz. Szczególnie przydatne dla dużych węzłów SVG i elementów powtarzających się w listach. Jeśli masz włączony React Compiler, optymalizacja ta następuje automatycznie — skill pokazuje, jak ją stosować ręcznie w starszych projektach.
Jak używać
Zidentyfikuj statyczne elementy JSX wewnątrz komponentu — te, które nie zmieniają się w zależności od propsów ani stanu. Typowe przykłady to ikony, elementy ładowania czy szablony SVG.
Przenieś element JSX poza komponent, przypisując go do zmiennej na poziomie modułu (przed definicją funkcji komponentu). Na przykład zamiast renderować div z klasą animacji wewnątrz funkcji, zdefiniuj go jako const loadingSkeleton =
.Zastąp renderowanie elementu w komponencie odwołaniem do zmiennej. Zmień {loading &&
} na {loading && loadingSkeleton}. Powtórz proces dla każdego statycznego elementu, który pojawia się w listach lub jest renderowany warunkowo wiele razy. Zwróć szczególną uwagę na duże węzły SVG, które są kosztowne do przebudowy.
Przetestuj komponent, aby upewnić się, że wygląd i zachowanie pozostały niezmienione. Zmiana powinna być transparentna dla użytkownika — widoczna tylko jako poprawa wydajności.
Jeśli projekt ma włączony React Compiler, możesz pominąć ręczną optymalizację — kompilator wykona ją automatycznie. Skill pozostaje przydatny dla projektów bez kompilatora lub jako dokumentacja najlepszych praktyk.