1k-performance
Optymalizuj React i React Native — usuń re-rendy, memory leaki i zmniejsz bundle
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do optymalizacji wydajności aplikacji React i React Native. Zawiera sprawdzone wzorce dla kontroli concurrent requestów (limit 3-5), minimalizacji przejść przez bridge, renderowania list powyżej 100 elementów za pomocą FlashList, memoizacji kosztownych operacji oraz obsługi ciężkich zadań bez blokowania UI. Dokumentacja obejmuje konkretne przykłady kodu i tabelę decyzyjną — kiedy zastosować każdą technikę.
Jak używać
Zainstaluj skill w swoim projekcie monorepo OneKey, wskazując ścieżkę do katalogu .claude/skills/1k-performance. Skill będzie dostępny jako asystent do analizy kodu React i React Native.
Gdy pracujesz nad komponentem lub funkcją, poproś skill o przeanalizowanie wydajności. Skill ma dostęp do narzędzi Read, Grep i Glob, dzięki czemu może skanować Twój kod i identyfikować problemy.
Dla wielu jednoczesnych requestów API zastosuj wzorzec executeBatched z limitem 3-5 równoczesnych zadań zamiast Promise.all na całej tablicy. Skill pokaże Ci przykład implementacji.
W listach z 100+ elementami użyj FlashList zamiast FlatList i ustaw windowSize={5}. Skill pomoże Ci zidentyfikować miejsca, gdzie ta optymalizacja będzie najskuteczniejsza.
Dla kosztownych obliczeń i re-renderów zastosuj memo, useMemo i useCallback. Skill wskaże komponenty i funkcje, które powinny być memoizowane na podstawie analizy Twojego kodu.
Dla operacji blokujących UI (ciężkie przetwarzanie) użyj InteractionManager lub setTimeout. Skill zweryfikuje, czy Twoje długotrwałe zadania są prawidłowo odłożone od głównego wątku.