Fragment Refs

React 🔴 Senior

Définition

Stable depuis React 19.3 (9 septembre 2026) : <Fragment ref={...}> (syntaxe explicite, pas <>) reçoit une FragmentInstance qui agit sur les nœuds DOM enfants de premier niveau sans élément englobant : addEventListener, focus/focusLast/blur, observeUsing (IntersectionObserver, ResizeObserver), getClientRects, scrollIntoView. Utile pour les composants qui ne veulent pas imposer de <div> wrapper.

Analogie

Une télécommande universelle qui pilote plusieurs appareils posés côte à côte, sans avoir à les mettre dans la même armoire.

Exemple de code

import { Fragment, useRef, useEffect } from 'react';
function Headings({ posts }) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.focus();                 // premier focusable
    const obs = new IntersectionObserver(onSeen);
    ref.current.observeUsing(obs);       // enfants DOM de 1er niveau
    return () => ref.current?.unobserveUsing(obs);
  }, []);
  return (
    <Fragment ref={ref}>   {/* syntaxe explicite, pas <> */}
      {posts.map(p => <h2 key={p.id} tabIndex={0}>{p.title}</h2>)}
    </Fragment>
  );
}

Cas d'usage

Gestion du focus et observation de visibilité dans des listes ou des composants headless sans wrapper qui casse la grille CSS.

Anti-pattern

Attendre que les méthodes atteignent les descendants profonds : hors focus(), elles ne ciblent que les enfants DOM de premier niveau.

Termes liés

#core#react19#dom

Dans l'actu

09/09 React 19.3 stabilise `<ViewTransition>` et `addTransitionType` (animations enter/exit/update/share via l'API View Transition, déclenchées par les Transitions) et les Fragment Refs : un ref sur `<Fragment>` renvoie un `FragmentInstance` avec écouteurs, focus, observers et mesures sur un groupe de nœuds frères. Bilan septembre 2026 →

Sources

Fiche mise à jour le 2026-09-27