Compétences vercel-react-best-practices
📦

vercel-react-best-practices

Sûr

Optimiser les performances de React et Next.js

Également disponible depuis: ZhanlinCui,vercel-labs

Créez des applications React et Next.js plus rapides avec des modèles de performance éprouvés. Cette compétence fournit des directives applicables de Vercel Engineering pour éliminer les cascades de rendu, réduire la taille des bundles et optimiser le rendu.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "vercel-react-best-practices". Composant avec récupérations useEffect séquentielles

Résultat attendu:

Problème : Trois hooks useEffect récupèrent des données séquentiellement, provoquant une cascade de rendu. Solution : Combiner les récupérations dans un seul useEffect avec Promise.all() ou convertir le parent en composant serveur.

Utilisation de "vercel-react-best-practices". Instruction d'importantion important toute la bibliothèque lodash

Résultat attendu:

Problème : import _ from lodash ajoute 72KB au bundle. Solution : Utiliser des importations avec tree-shaking comme import debounce from lodash/debounce ou passer à lodash-es pour une meilleure optimisation du bundler.

Utilisation de "vercel-react-best-practices". Composant recalculant une valeur coûteuse à chaque rendu

Résultat attendu:

Problème : Le calcul coûteux s'exécute à chaque rendu. Solution : Envelopper dans useMemo avec les dépendances appropriées, ou extraire vers un composant mémoisé séparé qui ne se re-rend que lorsque les entrées changent.

Audit de sécurité

Sûr
v1 • 2/25/2026

Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.

51
Fichiers analysés
4,901
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Création de nouvelles fonctionnalités React

Les développeurs React créant de nouvelles fonctionnalités écrivent des composants avec une performance optimale dès le départ, en suivant des modèles approuvés par Vercel pour la récupération de données, le rendu et l'optimisation des bundles

Examen des pull requests

Les équipes examinant les pull requests vérifient le code pour les anti-patterns de performance avant la fusion, détectant les cascades, les re-rendus inutiles et le gonflement des bundles tôt dans le développement

Migration vers Next.js App Router

Les ingénieurs migrant vers Next.js App Router convertissent les modèles côté client vers l'architecture des composants serveur, apprenant l'utilisation appropriée du cache serveur, des limites de sérialisation et de la récupération parallèle de données

Essayez ces prompts

Examiner le composant pour les problèmes de performance 
Examinez ce composant React pour les problèmes de performance. Identifiez toutes les cascades de rendu, les re-rendus inutiles ou les opportunités d'optimisation de bundle. Suggérez des améliorations spécifiques basées sur les meilleures pratiques de Vercel.
Corriger la cascade de récupération de données 
Ce composant récupère des données séquentiellement. Refactorisez-le pour récupérer en parallèle en utilisant Promise.all() ou restructurez-le en composants serveur. Expliquez quelle approche est meilleure pour ce cas d'usage.
Optimiser le cache des composants serveur 
Analysez la récupération de données de ce composant serveur. Recommandez une stratégie de cache en utilisant React.cache() pour la déduplication par requête ou le cache LRU pour l'optimisation inter-requêtes. Incluez les considérations d'invalidation de cache.
Architecturer la performance d'un tableau de bord multi-pages 
Concevez un tableau de bord avec 10+ widgets affichant des données en temps réel et historiques. Spécifiez : 1) Les limites composants serveur vs client, 2) La stratégie de récupération et de cache des données, 3) Les états de chargement avec Suspense, 4) L'optimisation des bundles pour les bibliothèques de graphisme tierces.

Bonnes pratiques

  • Démarrer les promesses tôt et await tard - initier la récupération de données avant qu'elle ne soit nécessaire, différer l'attend jusqu'à ce que la valeur soit requise
  • Utiliser les composants serveur par défaut - n'ajouter 'use client' que lorsque les API du navigateur ou l'interactivité sont requises
  • Préférer SWR ou React Query pour la récupération de données client - cache intégré, déduplication et revalidation

Éviter

  • Récupération séquentielle de données dans des hooks useEffect séparés - provoque des cascades de rendu
  • Importer des bibliothèques d'utilitaires entières - bundles gonflés, utiliser des importations spécifiques à la place
  • Utiliser && pour le rendu conditionnel de composants qui rendent '0' - utiliser l'opérateur ternaire

Foire aux questions

Quand dois-je utiliser les composants serveur vs les composants client ?
Par défaut, utilisez les composants serveur pour la récupération de données, les calculs intensifs et les intégrations backend. Utilisez les composants client uniquement pour l'interactivité (useState, useEffect), les API du navigateur ou les gestionnaires d'événements. Gardez les composants client aux feuilles de votre arbre de composants.
Comment corriger les cascades de rendu dans mes composants ?
Utilisez Promise.all() pour les récupérations indépendantes, restructurez pour une récupération parallèle dans les composants serveur, ou utilisez des bibliothèques comme better-all pour les dépendances partielles. Démarrez les récupérations tôt (niveau supérieur) et await tard (où nécessaire).
Quelle est la différence entre React.cache() et le cache LRU ?
React.cache() fournit une déduplication par requête - met en cache dans un seul rendu. Le cache LRU persiste entre les requêtes en utilisant des magasins externes comme Redis ou Map en mémoire. Utilisez cache() pour la déduplication, LRU pour les données coûteuses inter-requêtes.
Comment puis-je réduire la taille de mon bundle Next.js ?
Utilisez next/dynamic pour les composants lourds, importez les utilitaires directement (pas les fichiers barrel), différez les scripts tiers après l'hydratation, et utilisez des importations conditionnelles pour les fonctionnalités non nécessaires au chargement initial. Vérifiez l'analyseur de bundle avec next-bundle-analyzer.
Pourquoi SWR aide-t-il la récupération de données côté client ?
SWR fournit une déduplication automatique des requêtes (plusieurs composants demandant les mêmes données partagent une seule récupération), un cache avec stratégie stale-while-revalidate, la revalidation au focus et les mises à jour optimistes. Réduit les requêtes réseau et améliore la performance perçue.
Quand dois-je utiliser startTransition ?
Utilisez startTransition pour les mises à jour d'état non urgentes qui peuvent être interrompues, comme filtrer de grandes listes ou taper dans des champs de recherche. Garde l'UI réactive en permettant à React de prioriser les interactions utilisateur sur les mises à jour en arrière-plan.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/react-best-practices

Réf

main

Structure de fichiers

📄 SKILL.md

📄 README.md

📄 metadata.json

📄 AGENTS.md

📄 rules/_sections.md

📄 rules/_template.md

📄 rules/async-*.md

📄 rules/bundle-*.md

📄 rules/server-*.md

📄 rules/client-*.md

📄 rules/rerender-*.md

📄 rules/rendering-*.md

📄 rules/js-*.md

📄 rules/advanced-*.md