suspense & streaming

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

use() API for reading promises and context

use() is a new API in React 19 to read resources in render. It can read a promise and will Suspend until the promise resolves. It can also read context conditionally, such as after early returns. Unlike hooks, use() can be called conditionally but only in render. use() does not support promises created in render.

use() does not support promises created in render

If you try to pass a promise created in render to use(), React will warn with 'A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.' You must pass a promise from a Suspense-powered library or framework that supports caching for promises.

ViewTransition component for shared element transitions

The ViewTransition component wraps elements to enable view transitions. It accepts a `name` prop for shared element transitions. When React sees a transition where a ViewTransition with a `name` is removed and a new ViewTransition with the same `name` is added, it will activate a shared element transition. React automatically generates a unique `name` for each element activated for a transition if not explicitly provided.

ViewTransition default prop for page transitions

The ViewTransition component accepts a `default` prop to specify the animation type for elements not in a shared element transition. When set to 'none', it disables transitions for that content. When set to a string like 'slow-fade', it applies that animation class to non-shared elements.

Suspense component for loading boundaries

The Suspense component from React creates a loading boundary. It takes a `fallback` prop that renders while its children (which may be promises) are resolving. Once resolved, the children render: `<Suspense fallback={<Loader />}><AsyncComponent /></Suspense>`

ViewTransition CSS pseudo-elements for animations

View transitions are animated using CSS pseudo-elements. `::view-transition-old(className)` targets the old element state and `::view-transition-new(className)` targets the new element state. These can be styled with animations: `::view-transition-old(.slow-fade) { animation-duration: 500ms; }`

ViewTransition component with default prop

The ViewTransition component accepts a `default` prop to set the default animation class for view transitions. When set to "none", it disables view transitions for that subtree. When set to "slow-fade", it applies a 500ms fade animation. Content can define its own ViewTransition to override the parent's default.

addTransitionType function for labeling transitions

The `addTransitionType` function from React labels the current transition with a type string. Called within a startTransition callback, it assigns a name to that transition that can be used by ViewTransition's share prop to apply type-specific CSS animations. Example: `addTransitionType('nav-forward')`.

ViewTransition with Suspense for fallback animations

Wrapping Suspense with a ViewTransition component will animate the transition from fallback to content with a cross-fade. The ViewTransition activates the View Transitions API whenever Suspense resolves its promise.

ViewTransition exit and enter props for Suspense animations

The ViewTransition component accepts `exit` prop on the fallback and `enter` prop on the content to provide custom animations when Suspense resolves. The `exit` value is applied as a class to ::view-transition-old and `enter` value is applied to ::view-transition-new.

Example: Animating Suspense with slide transitions

```js <Suspense fallback={ <ViewTransition exit="slide-down"> <VideoInfoFallback /> </ViewTransition> } > <ViewTransition enter="slide-up"> <VideoInfo id={id} /> </ViewTransition> </Suspense> ``` With CSS: ```css ::view-transition-old(.slide-down) { animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; } ::view-transition-new(.slide-up) { animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; } @keyframes slide-up { from { transform: translateY(10px); } } @keyframes slide-down { from { transform: translateY(0); } to { transform: translateY(10px); } } ``` The fallback animates down while content animates up when Suspense resolves.

Example: Navigation with transition types and shared element transitions

```js import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); return ( <div className="page"> <div className="top"> <div className="top-nav"> <ViewTransition name="nav" share={{ 'nav-forward': 'slide-forward', 'nav-back': 'slide-back', }}> {heading} </ViewTransition> {isPending && <span className="loader"></span>} </div> </div> <ViewTransition default="none"> <div className="bottom"> <div className="content">{children}</div> </div> </ViewTransition> </div> ); } ``` Shows using ViewTransition with name and share props to apply different animations based on transition type, and opting out with default="none".

Example: Shared element transition with video thumbnails

```js export function Thumbnail({ video, children }) { return ( <ViewTransition name={`video-${video.id}`}> <div aria-hidden="true" tabIndex={-1} className={`thumbnail ${video.image}`} > {children} </div> </ViewTransition> ); } ``` Uses ViewTransition name prop with a unique identifier per video to create smooth shared element transitions between pages.

Give your agent this brain