Front-end · 6 mondes · 18 étapes

React

Composants, état, effets : des interfaces web qui réagissent, rendues pour de vrai.

Progression

0 %

0/18 étapes terminées

← Décryptages

Avancé · 10 min de lecture

Des composants qui tiennent

Remonter, extraire, centraliser

1Définition

Quand une application grandit : on remonte l'état partagé dans le parent commun (props vers le bas, fonctions pour remonter les événements), on extrait les logiques répétées dans des hooks personnalisés, et l'on centralise les changements complexes dans un réducteur (useReducer).

2Principes fondamentaux

Une source de vérité

Un état partagé vit dans un seul composant.

Des hooks pour la logique

useQuelqueChose, chaque appel a son propre état.

Des actions qui décrivent

dispatch({ type: "cocher", id }) : ce qui s'est passé, pas comment.

Un réducteur pur

État + action → nouvel état, sans effet de bord.

3Exemples pratiques

Partager au loin avec un contexte

Exemple

1const ThemeContext = createContext("clair");2 3<ThemeContext value="sombre"><Page /></ThemeContext>4 5const theme = use(ThemeContext);   // n'importe où en dessous

Quand une donnée doit traverser beaucoup de niveaux, le contexte évite de la passer de parent en enfant.

Tester un réducteur

Exemple

1const avant = [{ id: 1, texte: "Quiz", faite: false }];2const apres = reducteur(avant, { type: "cocher", id: 1 });3// apres[0].faite === true, et avant n'a pas bougé

Une fonction pure se teste sans interface, avec les outils du cours Tests & déploiement.

4Erreurs courantes

Dupliquer l'état

À éviter

// deux composants, deux useState pour la même série

À faire

Un état dans le parent commun

Pourquoi : Ils se désynchronisent.

Un hook dans une condition

À éviter

if (ouvert) useEffect(…)

À faire

useEffect(() => { if (ouvert) … })

Pourquoi : L'ordre des hooks doit être identique à chaque rendu.

Muter dans le réducteur

À éviter

etat.push(tache); return etat;

À faire

return [...etat, tache];

Pourquoi : Un réducteur renvoie un nouvel état.

5Subtilités à connaître

◆Le contexte n'est pas un gestionnaire d'état : il transporte une valeur, souvent un état tenu plus haut.
◆Le compilateur React (React Compiler) mémorise automatiquement ce qui doit l'être : useMemo et useCallback deviennent rarement nécessaires.
◆Zustand, Redux Toolkit ou Jotai prennent le relais quand l'état partagé devient vraiment global — Sys-Code utilise Zustand.

6Vérifie ta compréhension

Question 1/3

Score 0

Un enfant modifie l'état du parent…

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.