26 janvier 2025
Les Hooks sont une fonctionnalité introduite dans React 16.8 qui permet d'utiliser l'état et d'autres fonctionnalités de React sans avoir à écrire de classe. Ils permettent d'ajouter des capacités d'état et de cycle de vie aux composants fonctionnels, et sont également rétro-compatibles.
Quand utiliser les Hooks ?
Les Hooks sont utiles lorsque vous souhaitez ajouter des états dans un composant fonctionnel, sans devoir le convertir en classe.
Règles des Hooks
Appeler les Hooks uniquement au niveau supérieur : Les Hooks doivent être appelés en haut des méthodes React, pas dans des boucles ou des conditions.
Appeler les Hooks uniquement depuis des fonctions React : Ils ne peuvent être appelés que depuis des composants fonctionnels ou des Hooks personnalisés.
Prérequis
Version Node 6 ou supérieure.
Version NPM 5.2 ou supérieure.
Outil Create-react-app pour exécuter des applications React.
Installation des Hooks
Pour utiliser les Hooks, vous devez installer la version 16.8.0-alpha de React et React-DOM avec ces commandes :
$ npm install react@16.8.0-alpha.1 --save
$ npm install react-dom@16.8.0-alpha.1 --save
Les Types de Hooks
Le Hook d'État (useState) : Permet d'ajouter un état local à un composant fonctionnel. Exemple avec un compteur :
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>Cliquez ici</button>
</div>
);
}
export default Counter;
Le Hook d'Effet (useEffect) : Permet de gérer les effets de bord (side effects) dans les composants fonctionnels. Par exemple, vous pouvez changer le titre du document chaque fois que l'état change :
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Vous avez cliqué ${count} fois`;
});
return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>Cliquez ici</button>
</div>
);
}
export default Example;
Conclusion
Les Hooks simplifient l'ajout d'états et d'effets dans les composants fonctionnels, rendant le code plus propre et plus lisible. Pour apprendre React et devenir développeur frontend, vous pouvez suivre un cours de formation en développement full-stack.
Si vous avez des questions ou des suggestions, n'hésitez pas à les poser dans la section des commentaires.