Les Hooks React

Les Hooks sont des fonctions qui permettent d'utiliser l'état et d'autres fonctionnalités React dans les composants fonctionnels. Ils ont été introduits dans React 16.8 pour simplifier la réutilisation de la logique entre les composants.

Les Hooks de base

useState

Nous l'avons déjà vu dans le chapitre précédent, mais voici un rappel :

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect

useEffect permet de gérer les effets secondaires dans les composants fonctionnels :

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Effet qui s'exécute après chaque rendu
    fetchUser(userId).then(setUser);
  }, [userId]); // Dépendance : l'effet se réexécute si userId change

  if (!user) return <div>Chargement...</div>;
  return <div>{user.name}</div>;
}

Les Hooks personnalisés

Les Hooks personnalisés permettent d'extraire la logique des composants dans des fonctions réutilisables :