Mon composant React est-il rendu deux fois en raison du mode strict ?

Rendu du composant React deux fois : problème de mode strict

En débogant votre application React, vous pouvez rencontrer un scénario dans lequel un composant spécifique est rendu deux fois. En examinant le code, vous tombez sur l'extrait suivant :

if (workInProgress.mode & StrictMode) {
  instance.render();
}

de "react-dom.development.js". Cela nous amène à la question : ce double rendu est-il lié au mode strict ?

Comprendre le mode strict

Le mode strict est une fonctionnalité intégrée dans React qui vise à détecter et signalez les problèmes potentiels dans votre code. Il permet des vérifications et des avertissements supplémentaires qui aident à identifier les erreurs courantes et les problèmes de performances qui pourraient autrement passer inaperçus.

Rôle du mode strict dans le double rendu

Pendant le développement, Strict Le mode agit comme un outil de débogage et restitue délibérément les composants deux fois. Ce double rendu permet d'identifier et de signaler les erreurs potentielles qui pourraient survenir lorsque les accessoires ou l'état d'un composant changent. Il vous permet de corriger ces problèmes avant de déployer l'application en production.

Désactivation du mode strict

Dans les environnements de production, cependant, le double rendu est inutile. Si vous n'avez pas l'intention d'utiliser les avantages du débogage du mode strict, vous pouvez le désactiver.

Une façon de désactiver le mode strict est de vous assurer que n'encapsule pas votre application dans votre fichier index.js :

// Enabled Strict Mode
ReactDOM.render(
  <React.StrictMode>
    {app}
  </React.StrictMode>,
  document.getElementById('root')
);

// Disabled Strict Mode
ReactDOM.render(
  app,
  document.getElementById('root')
);

En supprimant le balise, vous désactivez ce comportement de débogage et vos composants ne seront rendus qu'une seule fois en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!