ref as a prop (fin de forwardRef)

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

Termes liés

Sources

• react.dev/blog/2024/12/05/react-19
• react.dev/reference/react/forwardRef
• react.dev/blog/2024/04/25/react-19-upgrade-guide