Débogage et dépannage

Ce guide vous aide à identifier et à résoudre les problèmes lors de l'utilisation du compilateur React. Apprenez à déboguer les problèmes de compilation et à résoudre les problèmes courants.

Comprendre le comportement du compilateur

Le compilateur React est conçu pour gérer le code qui suit lesRègles de React. Lorsqu'il rencontre du code qui pourrait enfreindre ces règles, il ignore prudemment l'optimisation plutôt que de risquer de modifier le comportement de votre application.

Erreurs du compilateur vs Problèmes d'exécution

Les erreurs du compilateurse produisent au moment de la construction et empêchent votre code de compiler. Elles sont rares car le compilateur est conçu pour ignorer le code problématique plutôt que d'échouer.

Les problèmes d'exécutionse produisent lorsque le code compilé se comporte différemment de ce qui était attendu. La plupart du temps, si vous rencontrez un problème avec le compilateur React, il s'agit d'un problème d'exécution. Cela se produit généralement lorsque votre code enfreint les Règles de React de manière subtile que le compilateur n'a pas pu détecter, et que le compilateur a compilé par erreur un composant qu'il aurait dû ignorer.

Lors du débogage des problèmes d'exécution, concentrez vos efforts sur la recherche des violations des Règles de React dans les composants affectés qui n'ont pas été détectées par la règle ESLint. Le compilateur s'appuie sur le fait que votre code suit ces règles, et lorsqu'elles sont enfreintes de manière qu'il ne peut pas détecter, c'est là que les problèmes d'exécution surviennent.

Modèles courants de rupture

L'une des principales façons dont le compilateur React peut casser votre application est si votre code a été écrit pour dépendre de la mémorisation pour sa correction. Cela signifie que votre application dépend de valeurs spécifiques étant mémorisées pour fonctionner correctement. Comme le compilateur peut mémoriser différemment de votre approche manuelle, cela peut conduire à un comportement inattendu comme des effets qui se déclenchent trop souvent, des boucles infinies ou des mises à jour manquantes.

Scénarios courants où cela se produit :

• Effets qui dépendent de l'égalité référentielle- Lorsque les effets dépendent du fait que des objets ou des tableaux conservent la même référence entre les rendus
• Tableaux de dépendances nécessitant des références stables- Lorsque des dépendances instables font que les effets se déclenchent trop souvent ou créent des boucles infinies
• Logique conditionnelle basée sur des vérifications de référence- Lorsque le code utilise des vérifications d'égalité référentielle pour la mise en cache ou l'optimisation

Processus de débogage

Suivez ces étapes lorsque vous rencontrez des problèmes :

Erreurs de construction du compilateur

Si vous rencontrez une erreur du compilateur qui casse inopinément votre construction, il s'agit probablement d'un bug dans le compilateur. Signalez-le au dépôtfacebook/reactavec :

• Le message d'erreur
• Le code qui a causé l'erreur
• Vos versions de React et du compilateur

Problèmes d'exécution

Pour les problèmes de comportement à l'exécution :

1. Désactiver temporairement la compilation

Utilisez"use no memo"pour isoler si un problème est lié au compilateur :

Si le problème disparaît, il est probablement lié à une violation des Règles de React.

Vous pouvez également essayer de supprimer la mémorisation manuelle (useMemo, useCallback, memo) du composant problématique pour vérifier que votre application fonctionne correctement sans aucune mémorisation. Si le bug persiste lorsque toute mémorisation est supprimée, vous avez une violation des Règles de React qui doit être corrigée.

2. Corriger les problèmes étape par étape

1. Identifier la cause racine (souvent la mémorisation-pour-la-correction)
2. Tester après chaque correction
3. Supprimer"use no memo"une fois corrigé
4. Vérifier que le composant affiche le badge ✨ dans React DevTools

Signaler les bugs du compilateur

Si vous pensez avoir trouvé un bug du compilateur :

1. Vérifier que ce n'est pas une violation des Règles de React- Vérifier avec ESLint
2. Créer une reproduction minimale- Isoler le problème dans un petit exemple
3. Tester sans le compilateur- Confirmer que le problème ne se produit qu'avec la compilation
4. Signaler unproblème:
   • Versions de React et du compilateur
   • Code de reproduction minimal
   • Comportement attendu vs réel
   • Tous les messages d'erreur

Prochaines étapes

• Consulter lesRègles de Reactpour prévenir les problèmes
• Consulter leguide d'adoption progressivepour les stratégies de déploiement graduel