Introduction aux Side Effects - Séance 4

Bienvenue dans la séance 4 ! Maintenant que vous savez gérer l'état avec useState, il est temps d'apprendre à interagir avec le monde extérieur à votre composant.

Qu'est-ce qu'un Side Effect ?

Un side effect (effet de bord) est une opération qui interagit avec quelque chose en dehors de votre composant React.

Définition

Un side effect est toute opération qui :

N'est pas directement liée au rendu du composant
Modifie quelque chose en dehors du scope de la fonction
Interagit avec des systèmes externes

En d'autres termes : tout ce qui n'est pas "afficher du JSX" !

Exemples de Side Effects

javascript

// ❌ Side effects (ne PAS faire directement dans le render)
function Component() {
  // Appel API
  fetch('https://api.example.com/data');

  // Modification du DOM
  document.title = 'Nouvelle page';

  // Timer
  setInterval(() => console.log('Tick'), 1000);

  // Local storage
  localStorage.setItem('user', 'Alice');

  return <div>Hello</div>;
}

Pourquoi c'est un problème ?

Si vous faites des side effects directement dans le corps du composant :

Ils s'exécutent à chaque rendu → peut causer des boucles infinies
Pas de contrôle sur quand ils s'exécutent
Pas de nettoyage → fuites mémoire possibles
Performance dégradée → opérations inutiles répétées

javascript

// ❌ Mauvais : Fetch à chaque rendu !
function BadComponent() {
  const [data, setData] = useState(null);

  // Ceci crée une boucle infinie :
  // fetch → setData → re-render → fetch → setData → ...
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => setData(data));

  return <div>{data}</div>;
}

Pourquoi le code ci-dessus crée-t-il une boucle infinie ?

Le Cycle de Vie d'un Composant

Pour comprendre les side effects, il faut comprendre le cycle de vie.

Les 3 Phases

Phase	Quand ?	Description
Mount	Première apparition	Le composant est créé et ajouté au DOM
Update	À chaque changement	Le composant se re-render (état, props changent)
Unmount	Disparition	Le composant est retiré du DOM

javascript

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // MOUNT : Le composant apparaît
  // → C'est ici qu'on veut faire le fetch initial

  // UPDATE : userId change
  // → On veut re-fetch avec le nouveau userId

  // UNMOUNT : Le composant disparaît
  // → On veut annuler les requêtes en cours

  return <div>{user?.name}</div>;
}

Parmi ces opérations, laquelle N'EST PAS un side effect ?

Mental Model

Avant useEffect : Les composants React étaient "purs" - juste des fonctions qui transforment données → JSX.

Avec useEffect : On peut "synchroniser" notre composant avec des systèmes externes (API, timers, etc.)

Pensez à useEffect comme : "Quand [X] change, fais [Y]"

Render vs Effect : L'Intuition

Avant de voir la syntaxe de useEffect (page suivante), comprenons l'idee :

Le rendu (rendering) = la partie pure de votre composant : transformer des donnees en JSX. C'est synchrone et rapide.
Les effets (effects) = les operations qui interagissent avec le monde exterieur. Ils s'executent apres le rendu, une fois que React a mis a jour l'ecran.

Schema Mental

User Interaction → State Change → Re-Render
                                     ↓
                              [DOM Updated]
                                     ↓
                             useEffect s'exécute

Le composant ne "bloque" jamais sur un effect. L'effet se lance apres que React a mis a jour l'ecran.

Pourquoi un Hook Special ?

Pourquoi React a cree useEffect au lieu de simplement laisser faire les side effects ?

Controle d'execution : Sans useEffect, le code s'execute a chaque rendu. Avec useEffect, vous choisissez quand l'effet se declenche (une seule fois, quand une valeur change, etc.).
Cleanup automatique : useEffect permet de "nettoyer" un effet (arreter un timer, se desabonner) quand le composant disparait ou quand l'effet se relance. Sans cela, vous auriez des fuites memoire.
Synchronisation avec l'etat : Vous pouvez re-executer un effet automatiquement quand une valeur change (par exemple, relancer une recherche quand le terme de recherche est modifie).

Vous verrez la syntaxe concrete de useEffect dans la page suivante.

Récapitulatif

Comprendre, pas memoriser

Ce qu'il faut retenir :

Side effect = interaction avec le monde exterieur (API, DOM, timers, etc.)
Lifecycle = Mount → Update → Unmount
Render = pur, synchrone, retourne du JSX
Effect = s'execute apres le rendu, gere les side effects
useEffect = le Hook pour gerer les side effects de maniere sure

Dans les prochaines sections, nous verrons comment utiliser useEffect concretement !

Prochaines Étapes

Maintenant que vous comprenez pourquoi les side effects nécessitent un traitement spécial, passons à la pratique :

useEffect - Syntaxe et patterns
Data Fetching - Récupérer des données d'API
React Router - Navigation multi-pages
Combinaison - useEffect + Routing pour des apps complètes