react-dom/components

130 notes in this subject, read out of this brain and free to use. This is page 3 of 3.

<Activity> use case for tabs

Activity boundaries are useful for tab interfaces where you want to preserve the state and DOM of inactive tabs without unmounting them. By wrapping each tab's content in an Activity boundary with mode set based on whether that tab is active, you can switch between tabs while preserving form inputs, scroll positions, and other ephemeral state.

<Activity> basic usage example

The simplest usage of Activity is to wrap a component with an Activity boundary and control visibility with the mode prop: ```js <Activity mode={isShowingSidebar ? "visible" : "hidden"}> <Sidebar /> </Activity> ``` When mode is "hidden", the Sidebar's state is preserved; when mode switches to "visible", the Sidebar appears with its previous state intact.

<Activity> component overview

The <Activity> component lets you hide and restore the UI and internal state of its children. When an Activity boundary is hidden, React will visually hide its children using the display: 'none' CSS property and destroy their Effects, cleaning up any active subscriptions. When the boundary becomes visible again, React will reveal the children with their previous state restored and re-create their Effects. While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.

<Activity> props

The <Activity> component accepts two props: children (the UI you intend to show and hide) and mode (a string value of either 'visible' or 'hidden'; if omitted, defaults to 'visible').

<Activity> with ViewTransition integration

If an Activity is rendered inside of a ViewTransition, and it becomes visible as a result of an update caused by startTransition, it will activate the ViewTransition's enter animation. If it becomes hidden, it will activate its exit animation.

<Activity> with text-only children caveat

A hidden Activity that just renders text will not render anything rather than rendering hidden text, because there's no corresponding DOM element to apply visibility changes to. For example, <Activity mode="hidden"><ComponentThatJustReturnsText /></Activity> will not produce any output in the DOM for a component that only returns 'Hello, World!'. <Activity mode="visible"><ComponentThatJustReturnsText /></Activity> will render visible text.

<Activity> preserves component state when hidden

When you hide a component using an Activity boundary instead of unmounting it via conditional rendering, React will save its internal state for later. This makes it possible to hide and then later restore components in the state they were previously in. This is different from conditional rendering like {isShowingSidebar && <Sidebar />}, which unmounts the component and loses its state.

<Activity> preserves DOM state when hidden

Since Activity boundaries hide their children using display: none, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again, such as preserving the value of a textarea or the playback position of a video element.

<Activity> for pre-rendering hidden content

Activity boundaries can be used to pre-render content that the user has yet to see for the first time. When an Activity boundary is hidden during its initial render, its children won't be visible on the page — but they will still be rendered, albeit at a lower priority than the visible content, and without mounting their Effects. This pre-rendering allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.

<Activity> data fetching during pre-rendering

Only data read from a source that activates a Suspense boundary, such as a Promise read with the use hook, is fetched during pre-rendering. Activity does not detect data fetched inside an Effect.

Give your agent this brain