Le but du mode strict dans React

1. Mode strict dans React
2. Avantages du mode strict React
3. Meilleures utilisations pour le mode strict React

JavaScript est un excellent langage de programmation pour développer des applications full-stack. Les développeurs débutants ont souvent du mal à écrire du code JavaScript propre et organisé. Heureusement, il existe des frameworks JavaScript qui fournissent une certaine structure pour l’écriture d’applications Web. Et React est l’un des frameworks, sinon le plus populaire, pour écrire des applications Web efficaces. Il fournit un composant d’assistance appelé StrictMode pour mettre en évidence les morceaux de code qui s’écartent des pratiques standard dans React.

Mode strict dans React

React StrictMode met en évidence les problèmes potentiels dans l’application. Ce faisant, il vous aide à écrire des applications plus lisibles et plus sûres. Cette fonctionnalité est incluse dans le package React, vous n’avez donc pas besoin de l’importer séparément. Si vous avez un code suspect, enveloppez-le dans le composant d’assistance StrictMode, et c’est tout. Voici comment l’utiliser dans les composants fonctionnels de React :

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

Dans ce cas, nous venons d’envelopper <SuspiciousComponent> avec notre composant d’aide. Si nous modifions le code du composant enfant en quelque chose qui va à l’encontre des pratiques recommandées dans React, StrictMode déclencherait l’alarme. Cela est nécessaire car certaines mauvaises pratiques peuvent ne pas faire planter l’application. Ce n’est pas parce que l’application fonctionne qu’elle ne pose aucun problème. Si vous avez des doutes sur un morceau de code, enveloppez-le avec le composant d’assistance <React.StrictMode> pour vous assurer que tout va bien. Vous pouvez encapsuler un seul composant, plusieurs composants ou une arborescence entière.

Si vous souhaitez rechercher des erreurs potentielles dans l’ensemble de l’arborescence des composants, examinez l’instruction return du composant parent et enveloppez le <div> (ou un autre élément) qui contient tous les autres composants. Si vous avez construit une application complexe, StrictMode détectera inévitablement certaines erreurs et les signalera à la console.

Tout comme le composant d’assistance Fragment, StrictMode ne rend aucune interface utilisateur réelle. Cela n’affecte pas non plus les styles de votre application.

React Strict Mode est utilisé pour détecter les bogues en mode développement. Une fois que vous avez nettoyé toutes les erreurs et que l’application est prête pour la production, vous pouvez la supprimer.

Avantages du mode strict React

Outre les avantages évidents de l’utilisation du StrictMode dans React, cela peut également être un outil utile pour apprendre à écrire un code de meilleure qualité.

Protéger des effets secondaires

Certaines méthodes de cycle de vie peuvent être appelées plusieurs fois pendant la phase de rendu, donc React recommande qu’elles ne contiennent aucun effet secondaire. Cette recommandation est souvent négligée, entraînant des fuites d’état et de mémoire incorrectes qui exposent votre application à des attaques extérieures. Heureusement, le composant d’assistance StrictMode peut vous aider à localiser les effets secondaires nocifs et à les corriger. Et pour y parvenir, les méthodes des composants enveloppés avec StrictMode sont volontairement appelées deux fois.

Détecter les pratiques obsolètes

Des fonctionnalités telles que findDOMNode étaient autrefois autorisées dans ReactJS, mais elles sont désormais obsolètes. Il en va de même pour l’API context, qui a été largement utilisée dans le passé mais est sur le point d’être supprimée. StrictMode peut être un outil utile pour alerter sur les méthodes obsolètes ou les fonctionnalités spécifiques à React.

Meilleures utilisations pour le mode strict React

Si vous travaillez avec une base de code que vous n’avez pas écrite, le StrictMode peut être un outil utile pour assurer la bonne organisation du code, surtout si un développeur inexpérimenté a écrit l’application React.

Trouver un bogue dans le code JavaScript (associé à React) peut être assez difficile. Mais envelopper le code avec StrictMode peut vous donner des idées sur ce qui ne va pas.

Dans l’ensemble, StrictMode est l’un des outils les plus utiles de React. Les développeurs débutants peuvent l’utiliser pour prendre l’habitude d’écrire du code conforme aux pratiques recommandées dans React. Plus vous jouez avec le mode strict, plus vous vous sentez à l’aise de l’utiliser.