Compétences react-best-practices

📦

react-best-practices

Name: react-best-practices
Author: sickn33

Sûr

Optimiser les performances React et Next.js avec les meilleures pratiques Vercel

Également disponible depuis: 0xBigBoss,0xBigBoss,vercel-labs

Des performances React médiocres entraînent des temps de chargement lents et des utilisateurs frustrés. Cette compétence fournit 45 règles prioritaires de Vercel Engineering pour éliminer les waterfalls, réduire les tailles de bundles et optimiser le rendu.

Prend en charge: Claude Codex Code(CC)

📊 69 Adéquat

Télécharger le ZIP du skill

Importer dans Claude

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

Activez et commencez à utiliser

Tester

Utilisation de "react-best-practices". Revoir ce motif de récupération de données pour les waterfalls

Résultat attendu:

ISSUE: Les appels await séquentiels créent un waterfall (3 allers-retours)
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()
FIX: Utiliser Promise.all() pour l'exécution parallèle (1 aller-retour)
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])

Utilisation de "react-best-practices". Comment charger paresseusement un composant éditeur de code lourd

Résultat attendu:

Utilisez next/dynamic pour le chargement paresseux des composants lourds :
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false, loading: () => <LoadingSkeleton /> }
)
Cela diffère ~300KB de bundle jusqu'au rendu du composant, améliorant le TTI.

Audit de sécurité

Sûr

v1 • 2/24/2026

Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.

Fichiers analysés

4,906

Lignes analysées

résultats

Total des audits

Aucun problème de sécurité trouvé

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

100

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Développeur frontend construisant des applications React

Utilisez cette compétence lors de l'écriture de nouveaux composants ou pages pour assurer des performances optimales dès le départ. La compétence guide l'optimisation du bundle, les motifs appropriés de récupération de données et les techniques de prévention des re-rendus.

Tech Lead examinant les Pull Requests

Référencez ces règles lors de la revue de code pour détecter les anti-modèles de performance comme les appels asynchrones séquentiels, les imports barrel inutiles ou les limites Suspense manquantes avant la fusion.

Assistant IA refactorisant le code hérité

Appliquez ces règles priorisées pour améliorer systématiquement les bases de code React existantes, en commençant par l'élimination critique des waterfalls avant d'aborder les optimisations de rendu à impact moyen.

Essayez ces prompts

Revoir le composant pour les problèmes de performance

Revoir ce composant React en utilisant les meilleures pratiques Vercel. Identifier les waterfalls, les re-rendus inutiles et les opportunités d'optimisation du bundle. Suggérer des corrections spécifiques avec des exemples de code.

Refactoriser la récupération séquentielle vers parallèle

Refactoriser ce code pour éliminer les waterfalls asynchrones. Utiliser Promise.all() pour les opérations indépendantes et déplacer les await dans les branches où les résultats sont réellement nécessaires.

Optimiser la taille du bundle pour les composants lourds

Appliquer des stratégies de division de code à ce composant. Identifier les opportunités pour les imports next/dynamiques, le chargement conditionnel et le préchargement lors des interactions utilisateur.

Corriger les problèmes de performance de re-rendu

Analyser ce composant pour les re-rendus inutiles. Appliquer la mémoïsation, les tableaux de dépendances appropriés, les abonnements à l'état dérivé et les motifs setState fonctionnels selon le cas.

Bonnes pratiques

Commencer par l'élimination critique des waterfalls avant les optimisations à impact moyen
Utiliser React.cache() pour la déduplication par requête et le cache LRU pour la mise en cache inter-requêtes
Extraire les callbacks stables en utilisant setState fonctionnel et stocker les gestionnaires dans les refs si nécessaire

Éviter

Appels await séquentiels pour des opérations indépendantes
Importation de bibliothèques utilitaires entières au lieu de fonctions spécifiques
Passage de fonctions directement comme dépendances d'effets au lieu de primitives

Foire aux questions

Quelles versions de React sont prises en charge ?

La plupart des motifs fonctionnent avec React 17+. Les motifs avancés comme startTransition, useTransition et Suspense pour la récupération de données nécessitent React 18+.

Puis-je utiliser ceci avec JavaScript au lieu de TypeScript ?

Oui, tous les motifs s'appliquent aux projets JavaScript. Les exemples utilisent la syntaxe TypeScript pour la clarté mais les concepts se transfèrent directement.

Dois-je appliquer les 45 règles en une fois ?

Non. Commencez par les règles de priorité CRITICAL (waterfalls asynchrones, optimisation du bundle) pour un impact maximum, puis adressez progressivement les priorités HIGH et MEDIUM.

Cette compétence fonctionne-t-elle avec Next.js App Router ?

Oui. Les motifs de composants serveur comme React.cache(), use cache() et la récupération parallèle serveur sont spécifiquement conçus pour l'architecture App Router.

Comment mesurer les améliorations de performance ?

Utilisez Web Vitals (LCP, FID, CLS) et React DevTools Profiler. La compétence fournit des estimations d'impact comme 'amélioration 2-10x' pour chaque motif.

Claude Code peut-il appliquer automatiquement ces corrections ?

Oui. Fournissez le contexte de la compétence et demandez à Claude Code de revoir ou refactoriser des fichiers spécifiques. Il appliquera les règles appropriées avec des exemples de code.