rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
How to use
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.