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.