react/suspense

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

ViewTransition placement relative to Suspense boundary determines animation type

Where you place the ViewTransition component relative to a Suspense boundary determines whether the fallback and content cross-fade as one update or animate as separate exit and enter animations. The placement controls how the boundary reveals during animation.

ViewTransition waits for font loading during Suspense reveal

When a ViewTransition animates a Suspense boundary's reveal, React waits for new fonts that the content introduces, up to a timeout, so the text does not flash with a fallback font. This font-waiting behavior only happens during a ViewTransition update, not during normal Suspense boundaries.

ViewTransition waits for image loading during Suspense reveal

When a ViewTransition animates a Suspense boundary's reveal, React waits for visible images to load, up to a timeout, so the animation does not start with a half-loaded image. This only happens during a ViewTransition update. Adding an onLoad handler to a specific image opts it out of waiting, even inside a ViewTransition.

Suspense with ViewTransition coordinates waiting for data, stylesheets, fonts, and images

A Suspense boundary can wait for data, stylesheets, fonts, and images at once. Waiting for fonts and images only happens during a ViewTransition update. The Suspense fallback is kept visible while data and stylesheets load, then the ViewTransition reveal waits for fonts and images so the content appears complete.

Preventing unwanted fallbacks with startTransition during updates

To prevent visible UI from being replaced by a fallback when an update causes a component to suspend, mark the update as non-urgent using startTransition. During a Transition, React will wait until enough data has loaded to prevent an unwanted fallback from appearing. This preserves already-displayed content during updates. Newly rendered Suspense boundaries will still immediately display fallbacks. React only prevents unwanted fallbacks during non-urgent updates using startTransition or useDeferredValue, not urgent updates.

Example: ViewTransition with Suspense and lazy loaded content

import {ViewTransition, useState, startTransition, Suspense} from 'react'; import {Video, VideoPlaceholder} from './Video'; import {useLazyVideoData} from './data'; function LazyVideo() { const video = useLazyVideoData(); return <Video video={video} />; } export default function Component() { const [showItem, setShowItem] = useState(false); return ( <> <button onClick={() => { startTransition(() => { setShowItem((prev) => !prev); }); }}> {showItem ? '➖' : '➕'} </button> {showItem ? ( <ViewTransition> <Suspense fallback={<VideoPlaceholder />}> <LazyVideo /> </Suspense> </ViewTransition> ) : null} </> ); } This example shows ViewTransition wrapping a Suspense boundary that displays a lazy-loaded video component with a placeholder fallback, using startTransition to prevent unwanted fallback display during state updates.

Example: ViewTransition waiting for font load with Suspense

import { ViewTransition, Suspense, use, useState, startTransition } from 'react'; import { fetchQuote } from './data.js'; import { freshFontUrl } from './font.js'; function Quote({ fontSrc }) { const quote = use(fetchQuote()); return ( <> <style href={fontSrc} precedence="default"> {`@font-face { font-family: 'Fancy'; src: url(${fontSrc}) format('truetype'); font-display: swap; }`} </style> <p className="quote fancy">{quote}</p> </> ); } export default function App() { const [fontSrc, setFontSrc] = useState(null); return ( <> <button onClick={() => { startTransition(() => { setFontSrc(freshFontUrl()); }); }}> Show quote </button> {fontSrc && ( <ViewTransition> <Suspense fallback={<p className="quote">⌛ Loading quote...</p>}> <Quote fontSrc={fontSrc} /> </Suspense> </ViewTransition> )} </> ); } This example shows ViewTransition waiting for a font to load before revealing content inside a Suspense boundary.

Example: ViewTransition waiting for image load with Suspense

import { ViewTransition, Suspense, useState, startTransition } from 'react'; import { freshImageUrl } from './image.js'; function Profile({ src }) { return ( <div className="card"> <img src={src} alt="Jack Pope" width={80} height={80} /> <p>Jack Pope</p> </div> ); } function ProfilePlaceholder() { return ( <div className="card"> <div className="avatar-placeholder" /> <p className="name-placeholder"> </p> </div> ); } export default function App() { const [src, setSrc] = useState(null); return ( <> <button onClick={() => { startTransition(() => { setSrc(freshImageUrl()); }); }}> Show profile </button> {src && ( <ViewTransition> <Suspense fallback={<ProfilePlaceholder />}> <Profile src={src} /> </Suspense> </ViewTransition> )} </> ); } This example shows ViewTransition waiting for an image to load before revealing a profile card inside a Suspense boundary.

Example: ViewTransition coordinating fonts, images, stylesheets, and data

import { ViewTransition, Suspense, use, useState, startTransition } from 'react'; import { fetchQuote } from './data.js'; import { freshStylesheetUrl, freshImageUrl } from './resources.js'; function ProfileCard({ resources }) { const quote = use(resources.quotePromise); return ( <> <link rel="stylesheet" href={resources.stylesheet} precedence="default" /> <div className="profile-card"> <img src={resources.image} alt="Jack Pope" width={80} height={80} /> <div> <p className="name">Jack Pope</p> <p className="bio">{quote}</p> </div> </div> </> ); } function ProfileCardPlaceholder() { return ( <div className="profile-card"> <div className="avatar-placeholder" /> <div> <p className="name name-placeholder"> </p> <p className="bio bio-placeholder"> </p> </div> </div> ); } export default function App() { const [resources, setResources] = useState(null); return ( <> <button onClick={() => { startTransition(() => { setResources({ quotePromise: fetchQuote(), stylesheet: freshStylesheetUrl(), image: freshImageUrl(), }); }); }}> Show profile </button> {resources && ( <ViewTransition> <Suspense fallback={<ProfileCardPlaceholder />}> <ProfileCard resources={resources} /> </Suspense> </ViewTransition> )} </> ); } This example shows ViewTransition coordinating waiting for data, stylesheets, fonts, and images inside a Suspense boundary.

Suspense component purpose

The Suspense component displays a fallback while the child components are loading.

Give your agent this brain