fragment & advanced components

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

Context can be used directly as a provider in React 19

In React 19, you can render <Context> as a provider instead of <Context.Provider>. Example: <ThemeContext value="dark">{children}</ThemeContext> instead of <ThemeContext.Provider value="dark">{children}</ThemeContext>. In future versions, <Context.Provider> will be deprecated.

ViewTransition component for list animations

ViewTransition can be used to animate lists of items as they re-order. Each item in a list should be wrapped with <ViewTransition key={item.id}> to enable animations when items are filtered or reordered.

useDeferredValue to activate list animations

To animate list items in response to search or filter changes, use useDeferredValue to defer the filter state. This defers the filtered results, which causes the ViewTransition components to animate as items enter and exit the list. Example: const deferredSearchText = useDeferredValue(searchText); const filteredVideos = filterVideos(videos, deferredSearchText);

ViewTransition with enter and exit props

ViewTransition accepts enter and exit props to specify custom animation classes. enter is applied when content appears (replaces ::view-transition-new), exit is applied when content disappears (replaces ::view-transition-old). Example: <ViewTransition exit="slide-down"><Fallback /></ViewTransition> and <ViewTransition enter="slide-up"><Content /></ViewTransition>

ViewTransition with Suspense for fallback animations

ViewTransition works with Suspense to animate transitions between fallback UI and actual content. Wrap the Suspense fallback with <ViewTransition exit="className"> and the actual content with <ViewTransition enter="className"> to control how each part animates in and out.

ViewTransition with name prop for shared element transitions

The name prop on ViewTransition enables shared element transitions (View Transitions API). Elements with the same name across page transitions will animate together. Example: <ViewTransition name="video-1"><img /></ViewTransition> on both old and new pages animates the image position/size.

ViewTransition with share prop for transition type mapping

The share prop maps transition types to animation class names. It accepts an object where keys are transition type names and values are CSS class names to apply. Example: <ViewTransition name="nav" share={{ 'nav-forward': 'slide-forward', 'nav-back': 'slide-back' }}>

ViewTransition with default prop

The default prop on ViewTransition sets a default animation class when no specific animation is active. Use default="none" to opt-out of animations for a subtree, allowing child ViewTransition components to define their own animations.

ViewTransition cross-fade animation pattern

A simple cross-fade animation between page transitions can be achieved by wrapping the page content with <ViewTransition key={url}> where key changes on URL updates. This triggers the default fade transition between old and new content.

Activity component signature and modes

The Activity component takes a mode prop that accepts either 'visible' or 'hidden'. When mode is 'visible', the component renders normally. When mode is 'hidden', the component is unmounted but React saves its state and continues to render it at a lower priority than visible content on screen.

Activity component effects behavior when hidden

When an Activity is in 'hidden' mode, Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later. This is the expected behavior when following the 'You Might Not Need an Effect' guide. StrictMode can be used to eagerly perform Activity unmounts and mounts to catch unexpected side effects.

Activity use case for preserving form state during navigation

Activity can preserve the state of UI components like input fields when a user navigates away from a page. By wrapping a component like Home in Activity with mode set based on the current URL, when the user returns to that page, the input state is restored and the user can resume where they left off.

Activity use case for pre-rendering hidden routes

Activity can be used to pre-render parts of the UI that a user is likely to visit next by keeping them in 'hidden' mode. This allows data fetching and rendering to occur before the user navigates, so when they do navigate, the content appears immediately without Suspense fallbacks.

Activity example: restoring state with Activity

Example of preserving form state during navigation: ```js function App() { const { url } = useRouter(); return ( <> <Activity mode={url === '/' ? 'visible' : 'hidden'}> <Home /> </Activity> {url !== '/' && <Details />} </> ); } ``` This wraps the Home component in Activity so its state (like search filters or form inputs) is preserved when the user navigates away and back.

Activity example: pre-rendering multiple routes

Example of pre-rendering hidden routes: ```js export default function App() { const { url } = useRouter(); const videoId = url.split("/").pop(); const videos = use(fetchVideos()); return ( <ViewTransition> {videos.map(({id}) => ( <Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}> <Details id={id}/> </Activity> ))} <Activity mode={url === '/' ? 'visible' : 'hidden'}> <Home /> </Activity> </ViewTransition> ); } ``` This pre-renders all Details pages in hidden Activity components so data fetching can occur before navigation, eliminating Suspense fallbacks when the user navigates.

ViewTransition and Activity work together

ViewTransition components are aware of Activity and work together with it. This allows View Transitions to animate correctly when Activity components change from hidden to visible mode or vice versa.

addTransitionType API for custom transition classes

addTransitionType is a React API that allows assigning transition type strings during a transition. These types can be used in ViewTransition to apply different animations based on the cause of the transition. For example, 'nav-forward' and 'nav-back' can be passed to addTransitionType to apply different slide animations.

addTransitionType example usage

```js function navigate(url) { startTransition(() => { addTransitionType('nav-forward'); go(url); }); } function navigateBack(url) { startTransition(() => { addTransitionType('nav-back'); go(url); }); } ``` This assigns transition type strings within a transition so ViewTransition can conditionally apply different animations based on whether the navigation is forward or backward.

Give your agent this brain