# Hook (React)

> Fonction spéciale de React, préfixée par « use », permettant à un composant fonctionnel de gérer un état ou d'exécuter du code lors de son cycle de vie.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/hook-react/

Avant 2019, seuls les composants React écrits sous forme de classes pouvaient gérer un état interne. Les hooks ont changé la donne : ils « accrochent » ces capacités à de simples fonctions, sans passer par une classe.

## Omniprésents dans l'éditeur de blocs

Écrire un bloc Gutenberg personnalisé revient presque toujours à manipuler des hooks React via le paquet `@wordpress/element` : `useState` pour stocker la valeur saisie dans un champ, `useEffect` pour réagir à un changement d'attribut, ou des hooks propres à WordPress comme `useSelect` pour lire des données du store Gutenberg.

## Exemple

```
import { useState } from '@wordpress/element';

function ChampTitre({ attributes, setAttributes }) {
  const [focus, setFocus] = useState(false);

  return (
    <input
      value={attributes.titre}
      onFocus={() => setFocus(true)}
      onChange={(e) => setAttributes({ titre: e.target.value })}
    />
  );
}
```

## Règles à respecter

- Un hook ne s'appelle qu'au niveau supérieur d'un composant, jamais dans une condition, une boucle ou une fonction imbriquée : React s'appuie sur l'ordre des appels pour associer chaque hook à son état.
- Ne pas confondre « hook React » et « hook WordPress » (comme `add_action` ou `add_filter` côté PHP) : les deux partagent le mot mais reposent sur des mécanismes totalement différents.
- Un hook personnalisé, une fonction qui commence elle aussi par `use` et regroupe une logique réutilisable, permet de partager du comportement entre plusieurs composants sans dupliquer de code.