ReactJS - Mode Strict : Guide pour les débutants

Bonjour, futurs développeurs React ! Aujourd'hui, nous allons plonger dans une fonctionnalité importante mais souvent négligée de React : le Mode Strict. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider pas à pas à travers ce concept, tout comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et embarquons ensemble dans cette aventure d'apprentissage !

Qu'est-ce que le Mode Strict ?

Avant de rentrer dans les détails, comprenons ce qu'est le Mode Strict dans React. Imaginez que vous apprenez à conduire. Le Mode Strict est comme avoir un instructeur de conduite très rigoureux assis à côté de vous, signalant chaque petite erreur que vous faites. Ce n'est pas là pour vous gronder, mais pour vous aider à devenir un meilleur conducteur - ou dans notre cas, un meilleur développeur React.

Le Mode Strict est un outil pour mettre en évidence les problèmes potentiels dans votre application. Il active des vérifications et des avertissements supplémentaires pour ses descendants. Voyons comment l'utiliser :

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Dans cet exemple, nous enveloppons notre composant App avec React.StrictMode. Cela signifie que tous les composants à l'intérieur de App seront soumis à ces vérifications supplémentaires.

Maintenant, explorons ce que le Mode Strict vérifie réellement.

Utilisation non sécurisée des cycles de vie

Qu'est-ce que les cycles de vie ?

Avant de parler des cycles de vie non sécurisés, comprenons ce qu'est un cycle de vie. Dans React, les composants passent par une série d'étapes de la naissance (montage) à la mort (démontage). Ces étapes sont appelées cycles de vie.

Cycles de vie non sécurisés

Certains méthodes de cycle de vie sont considérées comme non sécurisées car elles peuvent entraîner des bugs dans le rendu asynchrone. Le Mode Strict aide à identifier leur utilisation. Voici un exemple :

class OldComponent extends React.Component {
componentWillMount() {
console.log("Cette méthode est non sécurisée !");
}

render() {
return <div>Bonjour, je suis un ancien composant !</div>;
}
}

Si vous utilisez ce composant en Mode Strict, vous verrez un avertissement dans la console à propos de l'utilisation de la méthode non sécurisée componentWillMount.

À la place, vous devriez utiliser des alternatives plus sûres. Voici un tableau des méthodes non sécurisées et de leurs alternatives sécurisées :

Méthode non sécurisée	Alternative sécurisée
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Utilisation de l'API Ref héritée

Qu'est-ce que les Refs ?

Les Refs offrent un moyen d'accéder aux nœuds DOM ou aux éléments React créés dans la méthode de rendu. Ils sont comme une ligne directe vers une partie spécifique de votre UI.

Refs en chaîne (hérité)

Dans le passé, les refs étaient créés en utilisant des chaînes, comme ceci :

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Cliquez içi !</button>;
}
}

Cette méthode est considérée comme héritée et peut causer des problèmes. Le Mode Strict vous avertira si vous utilisez des refs en chaîne.

Utilisation moderne des Refs

À la place, vous devriez utiliser l'API createRef ou le hook useRef :

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Cliquez içi !</button>;
}
}

Dans cet exemple, nous utilisons React.createRef() pour créer un ref, ce qui est beaucoup plus sûr et plus efficace.

Utilisation héritée de findDOMNode

Qu'est-ce que findDOMNode ?

findDOMNode était une méthode utilisée pour rechercher dans l'arbre DOM une instance spécifique de composant React. Cependant, elle est maintenant dépréciée en raison des problèmes potentiels qu'elle peut causer.

Exemple d'utilisation de findDOMNode

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>J vais devenir rouge !</div>;
}
}

Ce code changera la couleur de fond du div en rouge. Cependant, utiliser findDOMNode de cette manière est déconseillé, et le Mode Strict vous enverra un avertissement.

Alternative moderne

À la place de findDOMNode, vous devriez utiliser des refs :

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'bleu';
}

render() {
return <div ref={this.myDiv}>J vais devenir bleu !</div>;
}
}

Cela atteint le même résultat mais de manière plus sûre et plus compatible avec React.

Conclusion

Et voilà, les amis ! Nous avons traversé le territoire du Mode Strict de React, explorant ses avertissements sur les cycles de vie non sécurisés, l'utilisation des refs héritées et la méthode dépréciée findDOMNode. Souvenez-vous, le Mode Strict est votre outil de développeur React de quartier, toujours là pour vous aider à écrire un code meilleur et plus sûr.

Alors, continuez à pratiquer, continuez à apprendre, et surtout, continuez à coder. Jusqu'à la prochaine fois, joyeuse programmation React !

Credits: Image by storyset