react/fragment

30 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Fragment syntax with <> shorthand

The <Fragment> component can be used with the <></> shorthand syntax to group elements without adding a wrapper node to the DOM. The empty JSX tag <></> is equivalent to <Fragment></Fragment> in most cases.

Fragment key prop requires explicit syntax

If you want to pass a key prop to a Fragment, you cannot use the <></> syntax. You must explicitly import Fragment from 'react' and render <Fragment key={yourKey}>...</Fragment>.

Fragment ref prop requires explicit syntax

If you want to pass a ref prop to a Fragment, you cannot use the <></> syntax. You must explicitly import Fragment from 'react' and render <Fragment ref={yourRef}>...</Fragment>. This is a Canary feature.

Fragment state reset caveats

React does not reset state when going from rendering <><Child /></> to [<Child />] or back, or when switching between <><Child /></> and <Child />. This only works a single level deep: going from <><><Child /></></> to <Child /> resets the state.

Fragment ref provides FragmentInstance object

When you pass a ref to a Fragment, React provides a FragmentInstance object that implements methods for interacting with the first-level DOM children wrapped by the Fragment. This is a Canary feature.

FragmentInstance.addEventListener(type, listener, options?)

Adds an event listener to all first-level DOM children of the Fragment. Parameters: type (string, event type like 'click' or 'focus'), listener (event handler function), options (optional, object or boolean for capture, matching DOM addEventListener API). Returns undefined.

FragmentInstance.removeEventListener(type, listener, options?)

Removes an event listener from all first-level DOM children of the Fragment. Parameters: type (string, event type), listener (event handler function to remove), options (optional, object or boolean matching DOM removeEventListener API). Returns undefined.

FragmentInstance.dispatchEvent(event)

Dispatches an event on the Fragment. Added event listeners are called, and the event can bubble to the Fragment's DOM parent if bubbles is true. Parameter: event (Event object). Returns true if event was not cancelled, false if preventDefault() was called.

FragmentInstance.focus(options?)

Focuses the first focusable DOM node in the Fragment by searching all nested children depth-first until a focusable element is found, not just direct children. Parameter: options (optional, FocusOptions object like {preventScroll: true}). Returns undefined.

FragmentInstance.focusLast(options?)

Focuses the last focusable DOM node in the Fragment by searching nested children depth-first then iterating in reverse. Parameter: options (optional, FocusOptions object). Returns undefined.

FragmentInstance.blur()

Removes focus from the active element if it is within the Fragment. If document.activeElement is not within the Fragment, blur does nothing. Returns undefined.

FragmentInstance.observeUsing(observer)

Starts observing all first-level DOM children of the Fragment with the provided observer. Parameter: observer (IntersectionObserver or ResizeObserver instance). Returns undefined.

FragmentInstance.unobserveUsing(observer)

Stops observing the Fragment's DOM children with the specified observer. Parameter: observer (the same IntersectionObserver or ResizeObserver instance previously passed to observeUsing). Returns undefined.

FragmentInstance.getClientRects()

Returns a flat array of DOMRect objects representing the bounding rectangles of all first-level DOM children of the Fragment. Returns Array<DOMRect>.

FragmentInstance.getRootNode(options?)

Returns the root node containing the Fragment's parent DOM node, matching the behavior of Node.getRootNode(). Parameter: options (optional, object with composed boolean property). Returns Document, ShadowRoot, or FragmentInstance itself if there is no parent DOM node.

FragmentInstance.compareDocumentPosition(otherNode)

Compares the document position of the Fragment with another node, returning a bitmask matching Node.compareDocumentPosition(). Parameter: otherNode (DOM node to compare against). Returns a bitmask of position flags. Empty Fragments and Fragments with children rendered through a portal include Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC in the result.

FragmentInstance.scrollIntoView(alignToTop?)

Scrolls the Fragment's children into view. When alignToTop is true or omitted, scrolls to align the first child with the top of the scrollable ancestor. When alignToTop is false, scrolls to align the last child with the bottom. Parameter: alignToTop (optional boolean, default true). Returns undefined. Unlike Element.scrollIntoView(), this does not accept a ScrollIntoViewOptions object.

FragmentInstance target scope for methods

Methods targeting children (addEventListener, observeUsing, getClientRects) operate on first-level host (DOM) children of the Fragment, not children nested inside another DOM element. focus and focusLast search nested children depth-first for focusable elements, unlike event and observer methods.

FragmentInstance observeUsing text node warning

observeUsing does not work on text nodes. React logs a warning in development if the Fragment contains only text children.

FragmentInstance event listeners and Activity trees

React does not apply event listeners added via addEventListener to hidden Activity trees. When an Activity boundary switches from hidden to visible, listeners are applied automatically.

FragmentInstance reactFragments property

Each first-level DOM child of a Fragment with a ref gets a reactFragments property—a Set<FragmentInstance> containing all Fragment instances that own the element. This enables caching a shared observer across multiple Fragments.

scrollIntoView caveats

scrollIntoView does not accept an options object; passing one throws an error. Use the alignToTop boolean instead. When the Fragment has no children, scrollIntoView scrolls the nearest sibling or parent into view as a fallback.

Fragment rendering multiple elements example

Use Fragment or <></> syntax to group multiple elements together. A component can only return one element, but by using a Fragment you can group multiple elements and return them as a group. Grouping elements with Fragment has no effect on layout or styles, unlike wrapping in a DOM element.

Fragment with key in list rendering example

When rendering multiple elements in a loop, assign a key to each element. If elements within the loop are Fragments, use the normal JSX element syntax <Fragment key={post.id}></Fragment> to provide the key attribute, not the <></> shorthand. Example: posts.map(post => <Fragment key={post.id}><PostTitle title={post.title} /><PostBody body={post.body} /></Fragment>)

Fragment ref with event listeners example

Fragment refs let you add event listeners to a group of elements without adding a wrapper DOM node. Use a ref callback to attach and clean up listeners: import { Fragment, useState, useRef, useEffect } from 'react'; function ClickableFragment({ children, onClick }) { const fragmentRef = useRef(null); useEffect(() => { const fragmentInstance = fragmentRef.current; if (fragmentInstance === null) return; fragmentInstance.addEventListener('click', onClick); return () => { fragmentInstance.removeEventListener('click', onClick); }; }, [onClick]) return <Fragment ref={fragmentRef}>{children}</Fragment>; } The addEventListener call applies the listener to every first-level DOM child of the Fragment. When children are dynamically added or removed, the FragmentInstance automatically adds or removes the listener.

Fragment ref focus management example

Fragment refs provide focus(), focusLast(), and blur() methods that operate across all DOM nodes within the Fragment. focus() focuses the first focusable DOM node by searching depth-first through all nested children, not just direct children. focusLast() does the same in reverse. blur() removes focus if the currently focused element is within the Fragment.

Fragment ref scrollIntoView example

Use scrollIntoView to scroll a Fragment's children into view without a wrapper element. Pass true (or omit the argument) to scroll the first child to the top. Pass false to scroll the last child to the bottom: fragmentRef.current.scrollIntoView(); // scroll first to top fragmentRef.current.scrollIntoView(false); // scroll last to bottom

Fragment ref observeUsing example

Use observeUsing to attach an IntersectionObserver to all first-level DOM children of a Fragment to track visibility without requiring child components to expose refs or adding a wrapper element: const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { visibleElements.add(e.target); } else { visibleElements.delete(e.target); } }); }); const fragmentInstance = fragmentRef.current; fragmentInstance.observeUsing(observer); Return cleanup: fragmentInstance.unobserveUsing(observer);

Fragment ref reactFragments caching pattern

A common performance optimization is to share a single IntersectionObserver per config and route its entries to the correct callbacks based on which element intersected. Fragment refs support this through the reactFragments property. When the shared observer fires, use entry.target.reactFragments to look up which FragmentInstance owns the intersecting element and run the right callbacks. Example: for (const inst of entry.target.reactFragments) { const callbacks = callbackMap.get(inst) || []; callbacks.forEach(cb => cb(entry)); }

Fragment component syntax

Fragment can be written as <Fragment> or using the shorthand syntax <>...</>.

Give your agent this brain