react

460 notes in this subject, read out of this brain and free to use. This is page 2 of 8.

Suspense fallback redisplay with transitions

If Suspense was displaying content and then suspends again, the fallback will be shown again unless the update was caused by startTransition or useDeferredValue.

Suspense does not detect data fetching in Effects or event handlers

Suspense only activates when data is read during render (such as with use()). Data fetched inside useEffect or event handlers does not trigger the Suspense boundary.

How Suspense boundaries are activated

A Suspense boundary activates when: (1) lazy-loading component code with lazy(), (2) reading a Promise with use(), including data from Server Components, (3) loading a stylesheet with <link rel="stylesheet"> and precedence prop, (4) waiting for large boundary HTML during streaming server rendering, (5) loading fonts during ViewTransition updates, (6) loading images during ViewTransition updates, or (7) performing CPU-bound render work inside Suspense defer boundary.

Displaying fallback while content loads example

Basic usage: wrap children in <Suspense fallback={<Loading />}><SomeComponent /></Suspense>. React displays the fallback until all code and data needed by children has loaded, then hides the fallback and renders the component.

Resetting Suspense boundaries with key on navigation

When navigating to different content (like a different user's profile), use a key prop on the Suspense boundary or a component above it. Changing the key resets the boundary so the fallback shows instead of the previous content.

Suspense with nested components example

Multiple components inside a single Suspense boundary: <Suspense fallback={<Loading />}><Biography /><Panel><Albums /></Panel></Suspense>. All components pop in together when ready. Moving them into a wrapper component doesn't change behavior if they share the same parent Suspense boundary.

Suspense-enabled framework pattern

A Suspense-enabled framework maintains a cache of Promises and calls use() to suspend on a Promise. Without a framework, you can read a Promise with use() directly as long as the Promise is cached so the same instance is reused across renders.

Client-only components with Suspense

To opt out a component from server rendering, throw an error in the server environment and wrap it in a Suspense boundary. The server HTML will include the fallback, which is replaced by the component on the client.

Suspense handles server errors with fallback

During streaming server rendering, if a component throws an error on the server, React finds the closest Suspense boundary and includes its fallback in the generated HTML instead of aborting. The user sees the fallback first. On the client, React attempts to render again.

Suspense cleanup of layout Effects

When React needs to hide already visible content because it suspended again, it cleans up layout Effects in the content tree. When the content is ready to be shown again, React fires the layout Effects again. This ensures Effects measuring DOM layout don't run while content is hidden.

useTransition provides isPending indicator for Suspense transitions

Replace startTransition with useTransition to get a boolean isPending value that indicates whether a Transition is happening. Use this to show visual indicators during loading.

Preventing already revealed content from hiding with startTransition

Wrap state updates in startTransition to mark them as non-urgent. This prevents React from hiding already visible content when a component suspends. The boundary waits for content to load rather than immediately showing the fallback.

Using useDeferredValue to show stale content while loading

Pass a deferred version of a value to components inside Suspense to keep showing previous results while new data loads. The deferredValue lags behind the current value until data is ready.

Suspense blocks boundaries for stylesheet loading

A stylesheet rendered with <link rel="stylesheet"> and a precedence prop blocks the Suspense boundary until the stylesheet loads (up to a timeout) so content doesn't appear unstyled.

Nested Suspense boundaries create loading sequence

When Suspense boundaries are nested, the inner boundary's fallback is shown for its content while outer boundaries can reveal their content independently. This creates a progressive loading sequence where different parts reveal at different times.

Suspense reveals entire tree together by default

The whole tree inside a Suspense boundary is treated as a single unit. If only one child component suspends, all components together are replaced by the fallback. They all appear together once ready.

Suspense component props

The <Suspense> component accepts three props: children (the UI to render), fallback (an alternate UI shown while content is loading), and defer (optional boolean, defaults to false). When defer is true, React may show fallback first and render children later even when nothing suspends, for expensive-to-render content.

act example: rendering components in tests

Example of rendering a component in tests using act: ```js import {act} from 'react'; import ReactDOMClient from 'react-dom/client'; import Counter from './Counter'; it('can render and update a counter', async () => { container = document.createElement('div'); document.body.appendChild(container); await act(async () => { ReactDOMClient.createRoot(container).render(<Counter />); }); const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 0 times'); expect(document.title).toBe('You clicked 0 times'); }); ``` This example shows how to render a component inside act() to ensure it is rendered and its effects are applied before assertions.

act parameter: async actFn

The parameter `async actFn` is an async function wrapping renders or interactions for components being tested. Any updates triggered within actFn are added to an internal act queue, flushed together to process and apply changes to the DOM. Since it is async, React will run any code that crosses an async boundary and flush updates scheduled.

act environment setup: IS_REACT_ACT_ENVIRONMENT

Using act requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in the test environment to ensure act is only used in the correct environment. Without this setting, an error message appears: 'Warning: The current testing environment is not configured to support act(...)'. Testing frameworks like React Testing Library set this automatically.

act must be used with await and async

The async version of act with await must be used. Although a sync version exists and works in many cases, it does not work in all cases due to how React schedules updates internally. The sync version will be deprecated and removed in the future.

act pitfall: DOM events require document container

Dispatching DOM events only works when the DOM container is added to the document. Without adding the container to the document, event dispatch will not function correctly in tests.

act example: dispatching events in tests

Example of dispatching events in tests using act: ```js import {act} from 'react'; import ReactDOMClient from 'react-dom/client'; import Counter from './Counter'; it('can render and update a counter', async () => { const container = document.createElement('div'); document.body.appendChild(container); await act(async () => { ReactDOMClient.createRoot(container).render(<Counter />); }); await act(async () => { button.dispatchEvent(new MouseEvent('click', { bubbles: true })); }); const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 1 times'); expect(document.title).toBe('You clicked 1 times'); }); ``` This example shows how to dispatch events inside act() to ensure all updates from the event are applied before assertions.

act signature and basic usage

act is a test helper that accepts an async function wrapping renders or interactions. The signature is `await act(async actFn)`. It ensures all React updates related to units of interaction have been processed and applied to the DOM before assertions. act returns nothing.

<ViewTransition> animation with Web Animations API

The onEnter, onExit, onUpdate, and onShare callbacks provide direct access to view transition pseudo-elements via the instance parameter, which has .old and .new properties representing the pseudo-elements. You can call .animate() on them just like on a DOM element to use the Web Animations API. For example: instance.new.animate([{opacity: 0}, {opacity: 1}], {duration: 500}). Each callback should return a cleanup function that cancels or cleans up the animation.

<ViewTransition> CSS styling with view transition classes

To customize animations for a <ViewTransition>, provide a View Transition Class (CSS class name) to one of the activation props (enter, exit, update, share, default). React applies the class name to child elements when the ViewTransition activates. You can then refer to this class using view transition pseudo selectors like ::view-transition-group(.classname), ::view-transition-old(.classname), and ::view-transition-new(.classname) to build reusable animations. Do not use direct view-transition-name styling; instead, use View Transition Classes.

<ViewTransition> component API

The <ViewTransition> component lets you animate a component tree with Transitions and Suspense. It automatically applies view-transition-name to inline styles of the nearest DOM node nested inside the component. React automatically calls startViewTransition behind the scenes. React waits for other ViewTransitions to finish before starting the next one, batching multiple updates into a single animation. The component is currently only available in React's Canary and Experimental channels.

<ViewTransition> example: shared element transition

Example showing shared element transitions with the same view-transition-name: ```js const THUMBNAIL_NAME = 'video-thumbnail'; export function Thumbnail({video}) { return ( <ViewTransition name={THUMBNAIL_NAME}> <div className={`thumbnail ${video.image}`} /> </ViewTransition> ); } export function FullscreenVideo({video, onExit}) { return ( <div className="fullscreenLayout"> <ViewTransition name={THUMBNAIL_NAME}> <div className={`thumbnail ${video.image} fullscreen`} /> <button className="close-button" onClick={onExit}>✖</button> </ViewTransition> </div> ); } ``` When one tree unmounts and another mounts with matching names, they animate from the unmounting side to the mounting side.

<ViewTransition> example: enter/exit animation

Example showing enter/exit animations: ```js function Child() { return ( <ViewTransition enter="auto" exit="auto" default="none"> <div>Hi</div> </ViewTransition> ); } function Parent() { const [show, setShow] = useState(); if (show) { return <Child />; } return null; } ``` When setShow is called inside startTransition and Child renders a ViewTransition before any other DOM nodes, an enter animation is triggered. When show switches to false, an exit animation is triggered.

prefers-reduced-motion and <ViewTransition>

Many users may prefer not having animations on the page. React does not automatically disable animations for prefers-reduced-motion. Always use the @media (prefers-reduced-motion) media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.

<ViewTransition> opting out of animations

You can use the class value 'none' to opt-out of animations. When wrapping children in a <ViewTransition update="none">, you disable animations for updates to those children while the parent can still trigger animations. This is useful when wrapping large existing components where you want to animate some updates but not all updates inside the whole component.

<ViewTransition> with Transition Types

Use the addTransitionType API to add a class name to child elements when a specific transition type is activated for a specific activation trigger. This allows customization of animation for each type of transition. Pass an object to view transition class props with string keys mapping transition type names to animation class names, and a 'default' key for the fallback. For example: enter={{ 'navigation-back': 'slide-right', 'navigation-forward': 'slide-left', default: 'auto' }}.

<ViewTransition> with Suspense boundaries

When animating Suspense content, React waits for data, new CSS (<link rel="stylesheet" precedence="...">), and up to 500ms for new fonts to load before starting the animation. If the <ViewTransition> is inside a new Suspense boundary instance, the fallback is shown first, then after the boundary fully loads, it triggers the animation to reveal the content. Placement of <ViewTransition> determines the animation type: inside Suspense creates an update animation (treating fallback and content as a cross-fade); outside Suspense creates enter/exit animations (separate instances for each).

<ViewTransition> with list reordering

When reordering a list without updating content, the update animation triggers on each <ViewTransition> in the list if they are outside a DOM node. If a <ViewTransition> is wrapped in a DOM node like <div>, then any parent <ViewTransition> would cross-fade instead, and individual items would not animate. Use keys properly to preserve identity when reordering lists; shared element transitions should not be used for reorder animations as they would not trigger if one side was outside the viewport.

Shared element transitions with <ViewTransition>

When one tree unmounts and another mounts, if there is a pair where the same name exists in both the unmounting tree and mounting tree, they trigger the share animation. It animates from the unmounting side to the mounting side. Unlike exit/enter animations, shared element transitions can be deeply inside the deleted/mounted tree. If a <ViewTransition> would also be eligible for exit/enter, the share animation takes precedence. It is important that only one <ViewTransition> with the same name is mounted at a time in the entire app to avoid conflicts.

<ViewTransition> with Activity component

You can use <Activity> with <ViewTransition> to animate a component in and out while preserving its state. When a <ViewTransition> inside an <Activity> becomes visible, the enter animation activates. When it becomes hidden, the exit animation activates. Without <Activity>, the component would reset every time it reappears.

View Transition Event arguments

Each View Transition event (onEnter, onExit, onShare, onUpdate) receives two arguments: instance (a View Transition instance providing access to pseudo-elements: old for ::view-transition-old, new for ::view-transition-new, name for the view-transition-name string, group for ::view-transition-group, imagePair for ::view-transition-image-pair); and types (an Array<string> of Transition Types included in the animation, empty array if no types were specified).

View Transition Event props

The View Transition Event props are: onEnter (optional, called when an enter animation is triggered); onExit (optional, called when an exit animation is triggered); onShare (optional, called when a share animation is triggered); onUpdate (optional, called when an update animation is triggered). Only one event fires per <ViewTransition> per Transition; onShare takes precedence over onEnter and onExit. Each event should return a cleanup function that is called when the View Transition finishes, allowing you to cancel or cleanup any animations.

View Transition Class props

The View Transition Class props are: enter (optional, 'auto', 'none', string, or object); exit (optional, 'auto', 'none', string, or object); update (optional, 'auto', 'none', string, or object); share (optional, 'auto', 'none', string, or object); default (optional, 'auto', 'none', string, or object). Values can be: auto (browser default animation), none (disable animations), or <classname> (custom CSS class name). Object values use string keys with values of auto, none, or custom className; {[type]: value} applies value if animation matches the Transition Type; {default: value} is the default value if no Transition Type is matched. If default is 'none' then all other triggers are turned off unless explicitly listed.

<ViewTransition> caveats

Only use name for shared element transitions; for all other animations React automatically generates a unique name to prevent unexpected animations. By default, setState updates immediately and does not activate <ViewTransition>, only updates wrapped in a Transition, <Suspense>, or useDeferredValue activate ViewTransition. ViewTransition creates an image that can be moved, scaled and cross-faded unlike Layout Animations; this can lead to better performance but may lose continuity in things that should move by themselves. Currently, <ViewTransition> only works in the DOM. Only top-level ViewTransitions animate on exit/enter; if there is a DOM node above <ViewTransition> before any other DOM nodes, no exit/enter animations trigger.

<ViewTransition> animation triggers

React automatically decides the type of View Transition animation to trigger: enter (activated if a ViewTransition is the first component inserted in a Transition); exit (activated if a ViewTransition is the first component deleted in a Transition); update (activated if a ViewTransition has any DOM mutations inside it or if the ViewTransition boundary itself changes size or position due to an immediate sibling); share (activated if a named ViewTransition is inside a deleted subtree and another named ViewTransition with the same name is part of an inserted subtree in the same Transition).

<ViewTransition> example: JavaScript animation with onEnter

Example showing JavaScript-driven animation using onEnter: ```js <ViewTransition onEnter={(instance, types) => { const anim = instance.new.animate([{opacity: 0}, {opacity: 1}], { duration: 500, }); return () => anim.cancel(); }}> <div>...</div> </ViewTransition> ``` The onEnter callback receives the instance with pseudo-element access and can animate using the Web Animations API, returning a cleanup function to cancel the animation.

<ViewTransition> props - core

The <ViewTransition> component accepts the following props: name (optional, string or object) for the name of the View Transition used for shared element transitions; View Transition Class props (enter, exit, update, share, default); and View Transition Event props (onEnter, onExit, onUpdate, onShare). If name is not provided, React generates a unique name for each View Transition to prevent unexpected animations.

addTransitionType example with startTransition

Example showing addTransitionType usage within startTransition: ```js import { startTransition, addTransitionType } from 'react'; function Submit({action}) { function handleClick() { startTransition(() => { addTransitionType('submit-click'); action(); }); } return <button onClick={handleClick}>Click me</button>; } ``` This example demonstrates calling addTransitionType inside startTransition to specify 'submit-click' as the cause of the transition.

addTransitionType types reset after commit

Transition Types are reset after each commit. This means a Suspense fallback will associate the types after a startTransition, but revealing the content does not carry the transition types forward.

addTransitionType multiple types behavior

If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a single Transition by calling addTransitionType multiple times within the same startTransition scope.

addTransitionType must be called inside startTransition

addTransitionType must be called within the callback scope of startTransition() to associate a transition type with that transition. When called inside startTransition, React associates the specified type as one of the causes for that transition.

addTransitionType API signature

addTransitionType is a React API that takes a single parameter: type (string). The parameter can be any string value representing the cause of a transition. The function returns nothing.

ViewTransition with addTransitionType CSS integration

When a ViewTransition activates from a transition with addTransitionType, React adds all the Transition Types as browser view transition types to the element. This allows customizing animations using CSS pseudo-selectors like `:root:active-view-transition-type(my-transition-type)`.

ViewTransition enter/exit properties with transition types

ViewTransition component accepts enter, exit, update, layout, and share props that can map transition type strings to class names. For example: `<ViewTransition enter={{'my-transition-type': 'my-transition-class'}}>`. If multiple types match, they are joined together. If no types match, the 'default' entry is used. If any type has the value 'none', the ViewTransition is disabled.

addTransitionType canary API

The addTransitionType API is currently only available in React's Canary and Experimental channels, not in stable releases.

ViewTransition onUpdate event with transition types

ViewTransition component accepts an onUpdate event handler with signature `onUpdate={(inst, types) => {...}}` where types is an array containing the transition type strings. This allows imperative animation customization based on which transition types are active.

createContext defines and provides context

createContext lets you define and provide context to child components. It is used with useContext to access the context value.

use example with Promise and context

The use hook can be used to read both Promise values and context values in a component. Example: function MessageComponent({ messagePromise }) { const message = use(messagePromise); const theme = use(ThemeContext); }

act wraps renders and interactions in tests

act lets you wrap renders and interactions in tests to ensure updates have processed before making assertions. This is useful for testing React components.

use reads value from resource like Promise or context

use lets you read the value of a resource like a Promise or context. It is a resource API that allows components to access resources without having them as part of their state.

startTransition marks state update as non-urgent

startTransition lets you mark a state update as non-urgent, allowing more urgent updates to take priority. It is similar to useTransition.

memo skips re-renders with same props

memo lets your component skip re-renders when the props have not changed. It is often used with useMemo and useCallback to optimize performance.

lazy defers component code loading

lazy lets you defer loading a component's code until it is rendered for the first time. This enables code splitting and lazy loading of components.

cacheSignal is for React Server Components only

cacheSignal is currently for use in React Server Components only. In Client Components, it will always return null. In the future it will also be used for Client Components when a client cache refreshes or invalidates.

Give your agent this brain