Module 3 : Hooks React Fondamentaux
Les Hooks sont des fonctions qui permettent d'utiliser l'état et d'autres fonctionnalités React dans les composants fonctionnels. Ce module couvre les hooks essentiels.
Qu'est-ce qu'un Hook ?
Avant les Hooks (React 16.8), il fallait des classes pour avoir un état. Les Hooks permettent d'utiliser ces fonctionnalités dans des fonctions simples.
Règles des Hooks :
- Toujours appeler les hooks au niveau supérieur du composant
- Jamais dans des conditions, boucles ou fonctions imbriquées
- Uniquement dans des composants React ou des custom hooks
Chapitres
| # | Chapitre | Contenu | |
|---|---|---|---|
| 1 | useState | Gérer l'état local d'un composant | |
| 2 | useEffect | Effets de bord, appels API, abonnements | |
| 3 | useRef | Références DOM et valeurs persistantes | |
| 4 | useContext | Partager des données sans prop drilling |
Objectifs du module
À la fin de ce module, vous saurez :
- Gérer l'état local avec
useState - Exécuter des effets de bord avec
useEffect - Comprendre le tableau de dépendances
- Accéder au DOM avec
useRef - Partager des données avec Context
Pourquoi les Hooks sont importants
Sans les Hooks, vous ne pouvez pas :
- Stocker des données qui changent (formulaires, compteurs, listes)
- Appeler une API quand le composant s'affiche
- Réagir aux changements de props ou d'état
- Accéder à un élément DOM (focus, scroll)
Les Hooks sont le cœur de React moderne.
Temps estimé
Environ 3-4 heures pour parcourir ce module et faire les exercices.