---
title: "Module 3 : Hooks React Fondamentaux"
weight: 390
description: "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."
category: "Formation"
type: "formation"
---

# 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](/training/module3-hooks-fondamentaux/usestate) | Gérer l'état local d'un composant |
| 2 | [useEffect](/training/module3-hooks-fondamentaux/useeffect) | Effets de bord, appels API, abonnements |
| 3 | [useRef](/training/module3-hooks-fondamentaux/useref) | Références DOM et valeurs persistantes |
| 4 | [useContext](/training/module3-hooks-fondamentaux/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.

[Commencer : useState ->](/training/module3-hooks-fondamentaux/usestate)