스킬 react-native-best-practices
📦

react-native-best-practices

낮은 위험 ⚙️ 외부 명령어🔑 환경 변수📁 파일 시스템 액세스⚡ 스크립트 포함🌐 네트워크 접근

Optimiser les performances de React Native

Les applications React Native souffrent souvent de problèmes de performances comme des animations lentes, des fuites de mémoire et des bundles volumineux. Cette compétence fournit des directives d'optimisation testées par les experts de Callstack pour améliorer les FPS, réduire le temps de démarrage et éliminer les fuites de mémoire.

지원: Claude Codex Code(CC)
📊 70 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"react-native-best-practices" 사용 중입니다. Mon FlatList défile lentement avec plus de 500 éléments

예상 결과:

  • 1. **Correction immédiate** : Passez de FlatList à FlashList pour 70% de meilleures performances sur les grandes listes
  • 2. **Optimisation clé** : Assurez-vous d'utiliser `keyExtractor` avec des IDs uniques, pas l'index
  • 3. **Optimisation du rendu** : Enveloppez les éléments de liste avec `React.memo` et utilisez la prop `areItemsEqual`
  • 4. **Gestion des images** : Utilisez la prop `cache` pour les images distantes et le mode de redimensionnement 'cover'
  • 5. **Éviter dans le rendu** : Gardez les calculs coûteux hors de renderItem et utilisez useCallback

"react-native-best-practices" 사용 중입니다. Mon application met 4 secondes à devenir interactive au lancement

예상 결과:

  • **Gains rapides (commencez ici) :**
  • - Désactiver la compression du bundle JS pour Hermes mmap sur Android (économise ~300ms)
  • - Différer les travaux non critiques avec InteractionManager.runAfterInteractions
  • - Utiliser react-native-screens pour la navigation native au lieu des routeurs basés sur JS
  •  
  • **Analyse du bundle :**
  • - Exécuter source-map-explorer pour trouver les grandes dépendances
  • - Retirer les polyfills Intl non utilisés (Hermes a le support natif Intl)
  • - Remplacer les imports barrel par des imports directs pour activer le tree shaking

보안 감사

낮은 위험
v1 • 1/23/2026

Documentation-only skill containing React Native optimization guidelines. Static analyzer flagged shell command examples in markdown code blocks as 'external_commands', but these are documentation patterns, not executable code. All 1101 detections are false positives - the skill only provides guidance and reference materials without executing any code.

29
스캔된 파일
6,499
분석된 줄 수
5
발견 사항
1
총 감사 수

위험 요인

⚙️ 외부 명령어 (4)
references/bundle-analyze-app.md:13-23 references/bundle-analyze-js.md:13-25 references/bundle-barrel-exports.md:15-18 SKILL.md:43-48
🔑 환경 변수 (1)
references/bundle-analyze-js.md:158
📁 파일 시스템 액세스 (2)
references/bundle-hermes-mmap.md:4 SKILL.md:93
⚡ 스크립트 포함 (1)
references/bundle-code-splitting.md:23
🌐 네트워크 접근 (2)
references/bundle-analyze-js.md:39 references/bundle-library-size.md:15
감사자: claude

품질 점수

50
아키텍처
100
유지보수성
85
콘텐츠
21
커뮤니티
90
보안
83
사양 준수

만들 수 있는 것

Débogage des applications React Native lentes

Un développeur mobile remarque que son application React Native a un défilement saccadé et des animations lentes. Utilisez cette compétence pour identifier si le problème vient du blocage du thread JS, des cycles de rendu ou du rendu natif, puis appliquez des corrections ciblées.

Réduction du temps de démarrage de l'application

Une équipe veut réduire le temps d'interactivité de leur application de 3 secondes à moins d'une seconde. La compétence guide à travers l'analyse du bundle, la configuration d'Hermes et la configuration de la navigation native pour des cold starts plus rapides.

Optimisation des performances de liste

Un fil social avec des centaines d'éléments cause des à-coups lors du défilement. La compétence recommande de passer de ScrollView à FlashList, d'implémenter une extraction de clé appropriée et d'éviter les re-rendus avec une memoization correcte.

이 프롬프트를 사용해 보세요

Vérification rapide des performances 
Mon application React Native a [symptôme spécifique : défilement lent/animations saccadées/utilisation élevée de la mémoire/démarrage lent]. Quelles sont les 3 premières choses que je dois vérifier et comment les corriger ?
Analyse de la taille du bundle 
Mon bundle React Native fait [X] Mo. Aidez-moi à utiliser source-map-explorer ou Expo Atlas pour identifier ce qui occupe de l'espace, puis suggérez des optimisations spécifiques pour les plus gros composants.
Investigation des fuites de mémoire 
La mémoire de mon application augmente au fil du temps et finit par planter. Guidez-moi à travers le processus pour identifier s'il s'agit d'une fuite de mémoire JS ou d'une fuite de mémoire native, et quels outils et patterns utiliser pour chaque cas.
Optimisation des animations 
J'utilise l'API Animated de React Native pour [animation spécifique] mais elle perd des images sur les appareils plus anciens. Qu'est-ce qui cause cela et comment puis-je utiliser les worklets Reanimated pour obtenir des animations fluides à 60fps ?

모범 사례

  • Profilez avant d'optimiser - utilisez React DevTools, source-map-explorer et les profileurs de plateforme pour identifier les vrais goulots d'étranglement au lieu de deviner
  • Utilisez FlashList au lieu de FlatList pour les listes de plus de 100 éléments, et fournissez toujours un keyExtractor unique utilisant des IDs stables, pas l'index de liste
  • Activez React Compiler (Expo SDK 52+, React Native 0.76+) pour une memoization automatique qui élimine les re-rendus inutiles sans useMemo/useCallback manuel

피하기

  • Utiliser ScrollView pour les grandes listes - cela rend tous les éléments upfront causant une inflation de la mémoire et un défilement lent ; utilisez toujours FlatList ou FlashList
  • Les exports barrel (importer depuis des fichiers index) - cela empêche le tree shaking et inclut du code non utilisé ; importez directement depuis les fichiers source
  • Bloquer le thread JS avec des calculs coûteux pendant les animations - utilisez les worklets Reanimated pour exécuter les animations sur le thread UI

자주 묻는 질문

Quelle est la manière la plus rapide d'améliorer les performances de React Native ?
Le plus grand impact vient de : (1) Remplacer ScrollView par FlashList pour les listes, (2) Activer React Compiler pour la memoization automatique, (3) Utiliser l'état atomique (Jotai/Zustand) au lieu de Context pour les valeurs fréquemment modifiées, (4) Utiliser useDeferredValue pour les données dérivées coûteuses.
Comment mesurer précisément les FPS de React Native ?
Utilisez React Native Performance Monitor (ajoutez la prop `perf` à la vue racine) pour les FPS en temps réel. Pour une analyse plus approfondie, utilisez Xcode Instruments sur iOS ou le CPU Profiler d'Android Studio. La bibliothèque react-native-performance fournit des marqueurs programmatiques pour les tests automatisés.
Dois-je utiliser des modules natifs ou des bibliothèques JavaScript ?
Préférez les modules natifs (Turbo Modules) pour : les tâches intensives en CPU, les opérations sur le système de fichiers, les composants UI natifs. Utilisez les bibliothèques JavaScript pour : la logique UI, la transformation de données, la gestion d'état. La compétence fournit une comparaison détaillée dans native-sdks-over-polyfills.md.
Comment réduire la taille du bundle de mon React Native ?
Stratégies clés : (1) Évitez les exports barrel - importez directement depuis la source, (2) Retirez les polyfills Intl non utilisés (Hermes inclut Intl natif), (3) Activez le tree shaking dans Expo SDK 52+ ou Re.Pack, (4) Utilisez la réduction de code R8 sur Android, (5) Auditez les dépendances avec bundle-analyze-js.md.
Qu'est-ce qui cause les fuites de mémoire dans React Native ?
Fuites JS : Fermetures maintenant des références, fermetures obsolètes dans useEffect, temporaires/listeners non libérés. Fuites natifs : Objets C++/Swift/Kotlin pas correctement désalloués, références circulaires dans les Turbo Modules. Utilisez les instantanés de tas dans Chrome DevTools pour JS et les profileurs de plateforme pour le natif.
Comment optimiser les animations pour 60fps ?
Utilisez les worklets Reanimated au lieu de l'API Animated pour les animations complexes - les worklets s'exécutent sur le thread UI. Pour les animations simples, utilisez useSharedValue et useAnimatedStyle. Évitez useAnimatedProps pour les propriétés qui changent à chaque image. Testez toujours sur des appareils bas de gamme.

개발자 세부 정보

라이선스

MIT

리포지토리

https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-best-practices/

참조

main

파일 구조

📁 references/

📁 images/

📄 bundle-treemap-source-map-explorer.png

📄 controlled-textinput-pingpong.png

📄 devtools-flamegraph.png

📄 emerge-xray-ios.png

📄 expo-atlas-treemap.png

📄 flashlight-flatlist-vs-flashlist.png

📄 fps-drop-graph.png

📄 memory-heap-snapshot.png

📄 tti-warm-start-diagram.png

📄 view-hierarchy-flattening.png

📄 xcode-instruments-templates.png

📄 xcode-thread-view.png

📄 bundle-analyze-app.md

📄 bundle-analyze-js.md

📄 bundle-barrel-exports.md

📄 bundle-code-splitting.md

📄 bundle-hermes-mmap.md

📄 bundle-library-size.md

📄 bundle-native-assets.md

📄 bundle-r8-android.md

📄 bundle-tree-shaking.md

📄 js-animations-reanimated.md

📄 js-atomic-state.md

📄 js-concurrent-react.md

📄 js-lists-flatlist-flashlist.md

📄 js-measure-fps.md

📄 js-memory-leaks.md

📄 js-profile-react.md

📄 js-react-compiler.md

📄 js-uncontrolled-components.md

📄 native-android-16kb-alignment.md

📄 native-measure-tti.md

📄 native-memory-leaks.md

📄 native-memory-patterns.md

📄 native-platform-setup.md

📄 native-profiling.md

📄 native-sdks-over-polyfills.md

📄 native-threading-model.md

📄 native-turbo-modules.md

📄 native-view-flattening.md

📄 SKILL.md