ref as a prop (fin de forwardRef)

React 🟢 Junior

Définition

Depuis React 19 (5 décembre 2024), un composant fonction reçoit ref comme une prop ordinaire : plus besoin de forwardRef, que la doc officielle annonce déprécié dans une version future. Un codemod est fourni. En complément, un callback ref peut retourner une fonction de nettoyage appelée au démontage.

Analogie

Avant, il fallait passer par un guichet spécial (forwardRef) pour transmettre la clé ; maintenant la clé arrive dans le même courrier que le reste.

Exemple de code

// Avant (React 18)
const Input = forwardRef((props, ref) => <input {...props} ref={ref} />);

// Après (React 19)
function Input({ ref, ...props }) {
  return <input {...props} ref={ref} />;
}

// Callback ref avec nettoyage (React 19)
<div ref={(node) => {
  const obs = new ResizeObserver(onResize);
  if (node) obs.observe(node);
  return () => obs.disconnect();   // appelé au démontage
}} />

Cas d'usage

Composants de design system (Input, Button) qui exposent leur nœud DOM au parent ; abonnements DOM avec nettoyage sans useEffect.

Anti-pattern

Continuer à écrire forwardRef dans du code React 19 neuf, ou retourner implicitement une valeur depuis un callback ref (TypeScript le refuse désormais).

Termes liés

#core#react19#interview

En entretien

Qu'est-ce qui change avec ref depuis React 19 ?
Depuis React 19 (5 décembre 2024), un composant fonction reçoit ref comme une prop ordinaire, donc forwardRef n'est plus nécessaire, la documentation officielle l'annonçant même déprécié pour une version future. Un codemod est fourni pour migrer le code existant.
Pourquoi éviter d'écrire du forwardRef dans du code React 19 neuf ?
Parce que ref arrive désormais directement comme prop, donc forwardRef ajoute une couche inutile vouée à disparaître. Autant écrire du code aligné avec le futur de l'API dès maintenant.
Quel cas d'usage concret pour ref as a prop ?
Les composants de design system comme Input ou Button qui exposent leur nœud DOM au parent, ou un abonnement DOM avec nettoyage via un callback ref qui retourne une fonction de cleanup au démontage. Attention, TypeScript refuse désormais un callback ref qui retourne implicitement une valeur.

Sources

Fiche mise à jour le 2026-09-27