React Academy · Leçon

Rôle de StrictMode

Comprendre les doubles appels et les avertissements concernant les API obsolètes en développement.

Rôle de StrictMode est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous découvrirez ce que fait StrictMode de React en développement, les avertissements qu'il fait apparaître et la manière dont il vous aide à écrire du code React plus sûr.

Qu'est-ce que StrictMode ?

StrictMode est un composant React spécial qui englobe une partie de votre arborescence et active des vérifications supplémentaires **uniquement en développement**. Il n'a aucun effet sur la compilation de production.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Double invocation du cycle de vie

En mode strict, React appelle intentionnellement votre fonction de composant et certaines méthodes du cycle de vie **deux fois** en développement. Cela permet de révéler les effets de bord qui ne sont pas correctement nettoyés.

Pourquoi cette double invocation ?

React 18 et les versions ultérieures peuvent remonter des composants à l'avenir (par exemple pour l'actualisation rapide et l'API Offscreen). La double invocation en développement simule ce comportement afin de vous faire détecter des erreurs comme des abonnements qui s'accumulent ou des mutations du DOM qui s'exécutent deux fois.

Montage, démontage et remontage de l'effet

Avec StrictMode dans React 18, chaque useEffect s'exécute, effectue son nettoyage, puis s'exécute à nouveau lors du montage initial. Si votre fonction de nettoyage est correcte, cette double exécution est sans conséquence. Si votre application s'interrompt, le nettoyage est absent ou incorrect.

useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Détecter les API obsolètes

StrictMode affiche un avertissement lorsque votre code utilise des API React obsolètes telles que `componentWillMount`, `componentWillReceiveProps` et les références sous forme de chaînes. Ces avertissements apparaissent en jaune dans la console du navigateur.

Avertissement concernant l'ancienne API de contexte

Si une bibliothèque tierce utilise l'ancienne API de contexte (`childContextTypes` / `getChildContext`), StrictMode affiche un avertissement. Cela indique que la bibliothèque doit être mise à jour pour utiliser l'API moderne `React.createContext`.

Activation sûre dans les applications existantes

Vous pouvez englober seulement une partie de votre arborescence de composants dans StrictMode afin de l'activer progressivement dans une application existante. Commencez par les nouvelles sections et étendez son utilisation à mesure que vous corrigez les avertissements.

function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Aucune différence visuelle

StrictMode ne rend aucune interface visible. C'est uniquement un outil de développement. Vous ne verrez aucun élément supplémentaire dans le DOM, mais seulement des avertissements supplémentaires dans la console et le comportement de double invocation.

L'activer dès le premier jour

La meilleure pratique consiste à activer StrictMode dès le début d'un projet. Corriger tôt les problèmes liés à la double invocation coûte bien moins cher que de les découvrir plus tard, lorsque la base de code est volumineuse.

Vérification rapide

Quel est l'objectif de la double invocation des fonctions de composant par StrictMode de React ?

Récapitulatif

StrictMode est un outil de développement sans coût qui invoque deux fois les rendus et les effets afin de détecter le code impur, affiche des avertissements concernant les API obsolètes et prépare votre application aux futures fonctionnalités de React.

Composants Pure et éviter les effets de bord lors du rendu

Prochaine leçon : **Composants Pure et éviter les effets de bord lors du rendu** — vous apprendrez à écrire des fonctions de rendu exemptes de mutations et de lectures externes.

Questions Fréquemment Posées

La leçon « Rôle de StrictMode » est-elle gratuite ?

Oui — le texte complet de « Rôle de StrictMode » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Rôle de StrictMode » ?

Comprendre les doubles appels et les avertissements concernant les API obsolètes en développement. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Rôle de StrictMode » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à React Academy