rn-performance
Optimiser les performances React Native
Les applications React Native peuvent souffrir de listes lentes, de rendus supplémentaires et de blocages du thread JS. Cette compétence fournit des modèles ciblés pour des écrans FlatList plus rapides, des composants mémoïsés, des sélecteurs optimisés, des images mises en cache et du profilage.
Installer avec mon Agent
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "rn-performance" from https://skillstore.io/skills/cjharmath-rn-performance.md and its manifest at https://skillstore.io/api/skills/cjharmath-rn-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Ressources lisibles par les agents
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Tester
Utilisation de « rn-performance ». Un écran d'annuaire de joueurs saccade lors du défilement de centaines de lignes.
Résultat attendu:
- Utiliser des clés d'éléments stables basées sur les identifiants des joueurs.
- Déplacer le rendu des lignes dans un composant d'élément mémoïsé.
- Ajouter getItemLayout si la hauteur des lignes est fixe.
- Envisager FlashList si le profilage montre encore des goulots d'étranglement dans la liste.
Utilisation de « rn-performance ». Un tableau de bord effectue un nouveau rendu de chaque carte lorsqu'une valeur Zustand change.
Résultat attendu:
- Éviter de sélectionner tout le store dans le tableau de bord.
- Utiliser des sélecteurs spécifiques pour la valeur de chaque carte.
- Utiliser une comparaison superficielle lorsqu'un composant a besoin de plusieurs valeurs liées.
- Profiler à nouveau pour confirmer que seules les cartes modifiées sont rendues.
Utilisation de « rn-performance ». Un écran se bloque brièvement après la navigation lorsqu'il calcule des classements.
Résultat attendu:
- Profiler le thread JS pendant la navigation.
- Reporter le travail lourd jusqu'à la fin des interactions.
- Mémoïser les entrées de classement lorsqu'elles sont réutilisées.
- Déplacer les calculs longs hors du chemin de rendu initial.
Audit de sécurité
SûrAll static findings were adjudicated as false positives. The detections come from Markdown fences, inline backticks, TypeScript examples, and a React.memo prop comparison in a documentation-only skill. No prompt injection, external command execution, network access, filesystem access, or data exfiltration intent was found in SKILL.md.
Facteurs de risque
⚙️ Commandes externes (40)
Partager et citer ce rapport
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
Copier le lien du rapport
https://skillstore.io/skills/cjharmath-rn-performance/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/cjharmath-rn-performance?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/cjharmath-rn-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-rn-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Carte intégrable
<iframe src="https://skillstore.io/embed/skills/cjharmath-rn-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citations académiques (APA · BibTeX · CFF)
Citation APA
CJHarmath. (2026). rn-performance security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-rn-performance/audits/7Citation BibTeX
@techreport{cjharmath-cjharmath-rn-performance-2026,
author = {CJHarmath},
title = {rn-performance security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-rn-performance/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "rn-performance security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-rn-performance/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-rn-performance:audit:7"
description: "Skillstore immutable audit report identifier"
Score Skillstore
Pourquoi ce score Niveau de confiance des preuves: ÉlevéCe que vous pouvez créer
Corriger les écrans de liste saccadés
Diagnostiquer les écrans FlatList lents et appliquer des clés stables, une mise en page des éléments, des lignes mémoïsées et des paramètres de fenêtre de rendu.
Revoir les performances avant publication
Vérifier les écrans riches en listes pour détecter les rendus évitables, les sélecteurs coûteux, les problèmes de cache d'images et les blocages du thread JS avant la publication.
Enseigner l'hygiène des rendus
Utiliser les exemples pour expliquer quand la mémoïsation aide, quand elle ajoute une surcharge et comment profiler le comportement de rendu.
Essayez ces prompts
Examine this React Native list screen for obvious performance issues. Focus on stable keys, renderItem, getItemLayout, and inline callbacks.
Analyze these components for unnecessary re-renders. Recommend where React.memo, useMemo, useCallback, or StyleSheet.create would help.
Review this Zustand usage for selector problems. Suggest focused selectors, shallow comparison, and safer component boundaries.
Create a prioritized performance plan for this React Native feature. Include profiling steps, list changes, image handling, memoization, and JS thread risks.
Bonnes pratiques
- Profiler d'abord, puis optimiser le composant ou la liste qui cause réellement le délai.
- Utiliser des props et des sélecteurs stables avant d'ajouter une mémoïsation large.
- Valider les améliorations sur de vrais appareils, surtout sur du matériel Android bas de gamme.
Éviter
- Ne pas mémoïser chaque valeur simple sans mesurer le coût.
- Ne pas passer d'objets ou de callbacks inline à des composants enfants mémoïsés.
- Ne pas sélectionner tout un store Zustand lorsqu'un composant n'a besoin que d'une seule valeur.