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 :

// useLocalStorage.js
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Utilisation
function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme}
    </button>
  );
}

Autres Hooks importants

useContext

useContext permet d’accéder à une valeur de contexte sans passer par les props :

import { createContext, useContext } from 'react';

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Cliquez-moi</button>;
}

useReducer

useReducer est utile pour gérer une logique d’état complexe :

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Compteur : {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useRef

useRef permet de conserver une référence mutable qui persiste entre les rendus :

import { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current.focus()}>
        Focus sur l'input
      </button>
    </div>
  );
}

Règles des Hooks

1. Appel uniquement au niveau supérieur :

   • Ne pas appeler les Hooks dans des conditions
   • Ne pas appeler les Hooks dans des boucles
   • Ne pas appeler les Hooks dans des fonctions imbriquées

2. Appel uniquement dans les composants React :

   • Ne pas appeler les Hooks dans des fonctions JavaScript normales
   • Ne pas appeler les Hooks dans des gestionnaires d’événements

Exercices pratiques

1. Créez un Hook personnalisé useFetch qui :

   • Gère les requêtes HTTP
   • Gère les états de chargement et d’erreur
   • Permet de mettre en cache les résultats

2. Créez un Hook personnalisé useForm qui :

   • Gère la validation des formulaires
   • Gère les erreurs
   • Permet de réinitialiser le formulaire

3. Créez un Hook personnalisé useDebounce qui :

   • Retarde l’exécution d’une fonction
   • Est utile pour les recherches en temps réel
   • Optimise les performances

Conclusion

Les Hooks sont un outil puissant pour gérer l’état et les effets secondaires dans React. Dans le prochain chapitre, nous allons explorer la gestion des événements dans React.