useImperativeHandle

React 🟡 Mid

Definition

Hook qui personnalise la valeur exposee par un ref forwarde. Permet de n'exposer que certaines methodes d'un composant enfant au parent.

Analogie

Comme un interphone d'immeuble : tu choisis quels boutons exposer, pas toutes les cles de l'appartement.

Exemple de code

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ''; }
  }));
  return <input ref={inputRef} />;
});

Cas d'usage

Exposer une API imperative limitee a un composant enfant (focus, scroll, reset).

Anti-pattern

Abuser de ce pattern pour recreer de la communication parent-enfant imperative au lieu du flux declaratif.

Termes lies

#hooks#advanced