Fragment Refs

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

Termes liés

Sources

• react.dev/blog/2026/09/09/react-19-3
• react.dev/reference/react/Fragment