La puissance des hooks React

React Hooks ont changé en profondeur la manière d'écrire des composants React. Introduits avec React 16.8, ils permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe.

Le hook le plus courant est useState. Il permet d'ajouter un état local à un composant fonctionnel.

const [count, setCount] = useState(0);

Cette ligne remplace une partie importante de la logique qu'on écrivait auparavant dans les composants de classe. Le code devient plus compact et plus facile à lire.

Un autre hook fondamental est useEffect. Il sert à gérer les effets de bord, comme les appels réseau, les abonnements ou les mises à jour du document.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

Cet effet s'exécute après chaque rendu où la valeur de count change.

useContext permet de consommer un contexte React sans ajouter des niveaux de composants inutiles. C'est très pratique pour gérer des thèmes, une session utilisateur ou des préférences globales.

Quand la logique d'état devient plus complexe, useReducer est souvent une meilleure option. Il est particulièrement utile quand plusieurs transitions d'état sont liées entre elles.

Les hooks personnalisés sont probablement l'un des usages les plus puissants. Ils permettent d'extraire une logique réutilisable dans une fonction claire et facile à partager.

function useWindowSize() {
  const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

  useEffect(() => {
    const handleResize = () => setSize([window.innerWidth, window.innerHeight]);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Ensuite, ce hook peut être utilisé dans n'importe quel composant :

const [width, height] = useWindowSize();

Les hooks apportent plusieurs avantages :

1. Ils permettent de réutiliser de la logique avec état sans changer la hiérarchie des composants.

2. Ils aident à découper un composant selon les responsabilités réelles de son code.

3. Ils rendent l'utilisation de nombreuses fonctionnalités React plus directe et plus expressive.

Il faut toutefois respecter quelques règles simples :

1. Appeler les hooks uniquement au niveau supérieur d'une fonction.

2. Les appeler uniquement depuis un composant React ou depuis un hook personnalisé.

Plus on avance avec React, plus les hooks deviennent naturels. Ils rendent le code plus lisible, plus composable et souvent plus facile à maintenir.