React Academy · Leçon

Composants purs et prévention des effets secondaires lors du rendu

Écrire des fonctions de rendu exemptes de mutations et de lectures externes.

Composants purs et prévention des effets secondaires lors du rendu est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 apprendrez ce qu'est un composant pur dans React, pourquoi les fonctions de rendu doivent être exemptes d'effets de bord et comment repérer et corriger les violations courantes de la pureté.

Qu'est-ce qu'une fonction Pure ?

Une fonction pure renvoie toujours la même sortie pour les mêmes entrées et ne provoque aucun effet de bord observable. React attend de votre fonction de composant qu'elle soit pure : avec les mêmes propriétés et le même état, elle doit toujours renvoyer le même JSX.

Pourquoi la pureté est importante dans React

React peut appeler votre composant plusieurs fois (StrictMode, fonctionnalités concurrentes, rendu côté serveur). Si votre rendu comporte des effets de bord comme des appels d'API, des mutations du DOM ou des écritures dans des variables globales, ces effets s'exécuteront plusieurs fois de manière imprévisible.

Impureté courante : modifier un état externe

Ne modifiez jamais lors du rendu des variables définies en dehors du composant. Les mutations sont acceptables dans les gestionnaires d'événements ou dans useEffect, mais pas au moment du rendu.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Impureté courante : modifier les propriétés

Ne modifiez jamais l'objet des propriétés à l'intérieur d'un composant. Les propriétés sont en lecture seule. Si vous avez besoin d'une version modifiée, créez une nouvelle variable.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Impureté courante : utiliser un nombre aléatoire ou une date lors du rendu

Appeler directement `Math.random()` ou `Date.now()` lors du rendu produit des valeurs différentes à chaque appel, ce qui rompt la pureté. Déplacez ces appels dans des initialiseurs d'état ou dans useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

Les appels d'API doivent être placés dans useEffect

Récupérer des données directement dans le corps de la fonction du composant (et non dans useEffect) constitue une impureté : cela se déclenche à chaque rendu. Déplacez toujours les appels de récupération dans useEffect avec les dépendances appropriées.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Les mutations locales sont acceptables

Créer et modifier des objets ou des tableaux créés *à l'intérieur* du même appel de rendu est parfaitement acceptable : personne d'autre ne peut les observer. On parle alors de mutation locale.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Utiliser StrictMode pour trouver les impuretés

React StrictMode appelle votre composant deux fois en développement. Si votre interface est incohérente entre les deux appels ou si vous observez des effets de bord dupliqués, votre rendu est impur. Corrigez cette impureté jusqu'à ce que le double appel soit sans conséquence.

Composants Pure et React.memo

Lorsqu'un composant est pur (mêmes propriétés → même sortie), l'encapsuler avec `React.memo` indique à React qu'il peut éviter un nouveau rendu si les propriétés n'ont pas changé, ce qui améliore les performances.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Vérification rapide

Lequel des effets de bord suivants peut être effectué directement à l'intérieur de la fonction de rendu d'un composant React ?

Récapitulatif

Les composants purs renvoient toujours le même JSX pour les mêmes entrées. Évitez de modifier les propriétés ou les variables externes lors du rendu, utilisez useEffect pour les effets de bord et comptez sur StrictMode pour détecter les violations.

Bonnes pratiques pour les clés et les références

Prochaine leçon : **Bonnes pratiques pour les clés et les références** — vous utiliserez correctement les clés stables, éviterez le piège de l'index utilisé comme clé et travaillerez avec des références de rappel.

Questions Fréquemment Posées

La leçon « Composants purs et prévention des effets secondaires lors du rendu » est-elle gratuite ?

Oui — le texte complet de « Composants purs et prévention des effets secondaires lors du rendu » 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 « Composants purs et prévention des effets secondaires lors du rendu » ?

Écrire des fonctions de rendu exemptes de mutations et de lectures externes. 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 2 sur 4.

Combien de temps prend la leçon « Composants purs et prévention des effets secondaires lors du rendu » ?

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

Rôle de StrictMode
Composants purs et prévention des effets secondaires lors du rendu
Bonnes pratiques pour les clés et les refs
Structure des dossiers et conventions de nommage

← Retour à React Academy