(instance = current)} />
++
{instance = current}} />
+```
+
+The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was supposed to be a cleanup function or not.
+
+### `useRef` requires an argument {/*useref-requires-argument*/}
+
+_This change is included in the `react-19` codemod preset as [`refobject-defaults`](https://github.com/eps1lon/types-react-codemod/#refobject-defaults)._
+
+A long-time complaint of how TypeScript and React work has been `useRef`. We've changed the types so that `useRef` now requires an argument. This significantly simplifies its type signature. It'll now behave more like `createContext`.
+
+```ts
+// @ts-expect-error: Expected 1 argument but saw none
+useRef();
+// Passes
+useRef(undefined);
+// @ts-expect-error: Expected 1 argument but saw none
+createContext();
+// Passes
+createContext(undefined);
+```
+
+This now also means that all refs are mutable. You'll no longer hit the issue where you can't mutate a ref because you initialised it with `null`:
+
+```ts
+const ref = useRef
(null);
+
+// Cannot assign to 'current' because it is a read-only property
+ref.current = 1;
+```
+
+`MutableRef` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+
+```ts
+interface RefObject {
+ current: T
+}
+
+declare function useRef: RefObject
+```
+
+`useRef` still has a convenience overload for `useRef(null)` that automatically returns `RefObject`. To ease migration due to the required argument for `useRef`, a convenience overload for `useRef(undefined)` was added that automatically returns `RefObject`.
+
+Check out [[RFC] Make all refs mutable](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64772) for prior discussions about this change.
+
+### Changes to the `ReactElement` TypeScript type {/*changes-to-the-reactelement-typescript-type*/}
+
+_This change is included in the [`react-element-default-any-props`](https://github.com/eps1lon/types-react-codemod#react-element-default-any-props) codemod._
+
+The `props` of React elements now default to `unknown` instead of `any` if the element is typed as `ReactElement`. This does not affect you if you pass a type argument to `ReactElement`:
+
+```ts
+type Example2 = ReactElement<{ id: string }>["props"];
+// ^? { id: string }
+```
+
+But if you relied on the default, you now have to handle `unknown`:
+
+```ts
+type Example = ReactElement["props"];
+// ^? Before, was 'any', now 'unknown'
+```
+
+You should only need it if you have a lot of legacy code relying on unsound access of element props. Element introspection only exists as an escape hatch, and you should make it explicit that your props access is unsound via an explicit `any`.
+
+### The JSX namespace in TypeScript {/*the-jsx-namespace-in-typescript*/}
+This change is included in the `react-19` codemod preset as [`scoped-jsx`](https://github.com/eps1lon/types-react-codemod#scoped-jsx)
+
+A long-time request is to remove the global `JSX` namespace from our types in favor of `React.JSX`. This helps prevent pollution of global types which prevents conflicts between different UI libraries that leverage JSX.
+
+You'll now need to wrap module augmentation of the JSX namespace in `declare module "....":
+
+```diff
+// global.d.ts
++ declare module "react" {
+ namespace JSX {
+ interface IntrinsicElements {
+ "my-element": {
+ myElementProps: string;
+ };
+ }
+ }
++ }
+```
+
+The exact module specifier depends on the JSX runtime you specified in the `compilerOptions` of your `tsconfig.json`:
+
+- For `"jsx": "react-jsx"` it would be `react/jsx-runtime`.
+- For `"jsx": "react-jsxdev"` it would be `react/jsx-dev-runtime`.
+- For `"jsx": "react"` and `"jsx": "preserve"` it would be `react`.
+
+### Better `useReducer` typings {/*better-usereducer-typings*/}
+
+`useReducer` now has improved type inference thanks to [@mfp22](https://github.com/mfp22).
+
+However, this required a breaking change where `useReducer` doesn't accept the full reducer type as a type parameter but instead either needs none (and rely on contextual typing) or needs both the state and action type.
+
+The new best practice is _not_ to pass type arguments to `useReducer`.
+```diff
+- useReducer>(reducer)
++ useReducer(reducer)
+```
+This may not work in edge cases where you can explicitly type the state and action, by passing in the `Action` in a tuple:
+```diff
+- useReducer>(reducer)
++ useReducer(reducer)
+```
+If you define the reducer inline, we encourage to annotate the function parameters instead:
+```diff
+- useReducer>((state, action) => state)
++ useReducer((state: State, action: Action) => state)
+```
+This is also what you'd also have to do if you move the reducer outside of the `useReducer` call:
+
+```ts
+const reducer = (state: State, action: Action) => state;
+```
+
+## Changelog {/*changelog*/}
+
+### Other breaking changes {/*other-breaking-changes*/}
+
+- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
+- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
+- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
+- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
+
+### Other notable changes {/*other-notable-changes*/}
+
+- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/facebook/react/pull/25700)
+- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/facebook/react/pull/26380)
+- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/facebook/react/pull/26625)
+- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/facebook/react/pull/26025)
+- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395)
+- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124)
+
+For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
+
+---
+
+Thanks to [Andrew Clark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits), and [Sebastian Silbermann](https://twitter.com/sebsilbermann) for reviewing and editing this post.
diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md
new file mode 100644
index 000000000..7cb7d42ee
--- /dev/null
+++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md
@@ -0,0 +1,124 @@
+---
+title: "React Conf 2024 Recap"
+author: Ricky Hanlon
+date: 2024/05/22
+description: Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. In this post, we'll summarize the talks and announcements from the event.
+---
+
+May 22, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii).
+
+---
+
+
+
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again.
+
+
+
+---
+
+At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more.
+
+The entire [day 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) and [day 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) streams are available online. In this post, we'll summarize the talks and announcements from the event.
+
+## Day 1 {/*day-1*/}
+
+_[Watch the full day 1 stream here.](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=973s)_
+
+To kick off day 1, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message followed by an introduction by [Seth Webster](https://twitter.com/sethwebster), who manages the React Org at Meta, and our MC [Ashley Narcisse](https://twitter.com/_darkfadr).
+
+In the day 1 keynote, [Joe Savona](https://twitter.com/en_JS) shared our goals and vision for React to make it easy for anyone to build great user experiences. [Lauren Tan](https://twitter.com/potetotes) followed with a State of React, where she shared that React was downloaded over 1 billion times in 2023, and that 37% of new developers learn to program with React. Finally, she highlighted the work of the React community to make React, React.
+
+For more, check out these talks from the community later in the conference:
+
+- [Vanilla React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=5542s) by [Ryan Florence](https://twitter.com/ryanflorence)
+- [React Rhythm & Blues](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=12728s) by [Lee Robinson](https://twitter.com/leeerob)
+- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) by [Amy Dutton](https://twitter.com/selfteachme)
+- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) by [Evan Bacon](https://twitter.com/Baconbrix)
+
+Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features:
+
+- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie)
+- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory)
+- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov)
+- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+
+Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out.
+
+For more information on using the Compiler and how it works, check out [the docs](/learn/react-compiler) and these talks:
+
+- [Forget About Memo](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=12020s) by [Lauren Tan](https://twitter.com/potetotes)
+- [React Compiler Deep Dive](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s) by [Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei)
+
+Watch the full day 1 keynote here:
+
+
+
+### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/}
+
+Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details.
+
+
+
+
+
+The React team is excited to share new updates:
+
+
+
+1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback.
+2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package.
+3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler.
+
+---
+
+At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler).
+
+Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta.
+
+In this post, we want to share what's next for React Compiler.
+
+## Try React Compiler Beta today {/*try-react-compiler-beta-today*/}
+
+At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag.
+
+To install React Compiler Beta:
+
+
+npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+
+
+Or, if you're using Yarn:
+
+
+yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+
+
+You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here:
+
+
+npm install -D eslint-plugin-react-compiler@beta
+
+
+Or, if you're using Yarn:
+
+
+yarn add -D eslint-plugin-react-compiler@beta
+
+
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/reference/react-compiler/configuration#react-17-18).
+
+## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
+
+Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library.
+
+React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+
+Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+
+[You can find more docs on this here.](/reference/react-compiler/compiling-libraries)
+
+## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
+
+We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release.
+
+From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions).
+
+The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum.
+
+## React Compiler at Meta {/*react-compiler-at-meta*/}
+
+At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components.
+
+We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us.
+
+We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization.
+
+## Roadmap to Stable {/*roadmap-to-stable*/}
+
+*This is not a final roadmap, and is subject to change.*
+
+We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin.
+
+* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters.
+* ✅ Public Beta: Available today, for feedback from the wider community.
+* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
+* 🚧 General Availability: After final feedback period from the community.
+
+These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed.
+
+Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+
+Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post.
+
+---
+
+Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post.
+
+---
+
+[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler.
+
+[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post.
+
+[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors.
\ No newline at end of file
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
new file mode 100644
index 000000000..1bbf2389c
--- /dev/null
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -0,0 +1,810 @@
+---
+title: "React v19"
+author: The React Team
+date: 2024/12/05
+description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+---
+
+December 05, 2024 by [The React Team](/community/team)
+
+---
+
+
+### React 19 is now stable! {/*react-19-is-now-stable*/}
+
+Additions since this post was originally shared with the React 19 RC in April:
+
+- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense).
+- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis).
+
+_The date for this post has been updated to reflect the stable release date._
+
+
+
+
+
+React v19 is now available on npm!
+
+
+
+In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+
+- [What's new in React 19](#whats-new-in-react-19)
+- [Improvements in React 19](#improvements-in-react-19)
+- [How to upgrade](#how-to-upgrade)
+
+For a list of breaking changes, see the [Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide).
+
+---
+
+## What's new in React 19 {/*whats-new-in-react-19*/}
+
+### Actions {/*actions*/}
+
+A common use case in React apps is to perform a data mutation and then update state in response. For example, when a user submits a form to change their name, you will make an API request, and then handle the response. In the past, you would need to handle pending states, errors, optimistic updates, and sequential requests manually.
+
+For example, you could handle the pending and error state in `useState`:
+
+```js
+// Before Actions
+function UpdateName({}) {
+ const [name, setName] = useState("");
+ const [error, setError] = useState(null);
+ const [isPending, setIsPending] = useState(false);
+
+ const handleSubmit = async () => {
+ setIsPending(true);
+ const error = await updateName(name);
+ setIsPending(false);
+ if (error) {
+ setError(error);
+ return;
+ }
+ redirect("/path");
+ };
+
+ return (
+
+
setName(event.target.value)} />
+
+ Update
+
+ {error &&
{error}
}
+
+
setName(event.target.value)} />
+
+ Update
+
+ {error &&
{error}
}
+
+
+#### By convention, functions that use async transitions are called "Actions". {/*by-convention-functions-that-use-async-transitions-are-called-actions*/}
+
+Actions automatically manage submitting data for you:
+
+- **Pending state**: Actions provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed.
+- **Optimistic updates**: Actions support the new [`useOptimistic`](#new-hook-optimistic-updates) hook so you can show users instant feedback while the requests are submitting.
+- **Error handling**: Actions provide error handling so you can display Error Boundaries when a request fails, and revert optimistic updates to their original value automatically.
+- **Forms**: `
+
+Building on top of Actions, React 19 introduces [`useOptimistic`](#new-hook-optimistic-updates) to manage optimistic updates, and a new hook [`React.useActionState`](#new-hook-useactionstate) to handle common cases for Actions. In `react-dom` we're adding [`
+ );
+}
+```
+
+In the next section, we'll break down each of the new Action features in React 19.
+
+### New hook: `useActionState` {/*new-hook-useactionstate*/}
+
+To make the common cases easier for Actions, we've added a new hook called `useActionState`:
+
+```js
+const [error, submitAction, isPending] = useActionState(
+ async (previousState, newName) => {
+ const error = await updateName(newName);
+ if (error) {
+ // You can return any result of the action.
+ // Here, we return only the error.
+ return error;
+ }
+
+ // handle success
+ return null;
+ },
+ null,
+);
+```
+
+`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`.
+
+
+
+`React.useActionState` was previously called `ReactDOM.useFormState` in the Canary releases, but we've renamed it and deprecated `useFormState`.
+
+See [#28491](https://github.com/facebook/react/pull/28491) for more info.
+
+
+
+For more information, see the docs for [`useActionState`](/reference/react/useActionState).
+
+### React DOM: ` }>
+
+
+ )
+}
+```
+
+
+
+#### `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:
+
+
+
+
+
+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.
+
+
+
+
+
+To fix, you need to pass a promise from a Suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.
+
+
+
+You can also read context with `use`, allowing you to read Context conditionally such as after early returns:
+
+```js {1,11}
+import {use} from 'react';
+import ThemeContext from './ThemeContext'
+
+function Heading({children}) {
+ if (children == null) {
+ return null;
+ }
+
+ // This would not work with useContext
+ // because of the early return.
+ const theme = use(ThemeContext);
+ return (
+
+ {children}
+
+ );
+}
+```
+
+The `use` API can only be called in render, similar to hooks. Unlike hooks, `use` can be called conditionally. In the future we plan to support more ways to consume resources in render with `use`.
+
+For more information, see the docs for [`use`](/reference/react/use).
+
+## New React DOM Static APIs {/*new-react-dom-static-apis*/}
+
+We've added two new APIs to `react-dom/static` for static site generation:
+- [`prerender`](/reference/react-dom/static/prerender)
+- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)
+
+These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`:
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+ const {prelude} = await prerender(
, {
+ bootstrapScripts: ['/main.js']
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server).
+
+For more information, see [React DOM Static APIs](/reference/react-dom/static).
+
+## React Server Components {/*react-server-components*/}
+
+### Server Components {/*server-components*/}
+
+Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
+
+React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+
+
+
+
+#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
+
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
+
+To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
+
+
+
+
+For more, see the docs for [React Server Components](/reference/rsc/server-components).
+
+### Server Actions {/*server-actions*/}
+
+Server Actions allow Client Components to call async functions executed on the server.
+
+When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+
+
+
+#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+
+A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
+
+For more info, see the docs for [Directives](/reference/rsc/directives).
+
+
+
+Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
+
+For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
+
+## Improvements in React 19 {/*improvements-in-react-19*/}
+
+### `ref` as a prop {/*ref-as-a-prop*/}
+
+Starting in React 19, you can now access `ref` as a prop for function components:
+
+```js [[1, 1, "ref"], [1, 2, "ref", 45], [1, 6, "ref", 14]]
+function MyInput({placeholder, ref}) {
+ return
+}
+
+//...
+
+```
+
+New function components will no longer need `forwardRef`, and we will be publishing a codemod to automatically update your components to use the new `ref` prop. In future versions we will deprecate and remove `forwardRef`.
+
+
+
+`ref`s passed to classes are not passed as props since they reference the component instance.
+
+
+
+### Diffs for hydration errors {/*diffs-for-hydration-errors*/}
+
+We also improved error reporting for hydration errors in `react-dom`. For example, instead of logging multiple errors in DEV without any information about the mismatch:
+
+
+
+
+
+Warning: Text content did not match. Server: "Server" Client: "Client"
+{' '}at span
+{' '}at App
+
+
+
+
+
+Warning: An error occurred during hydration. The server HTML was replaced with client content in \.
+
+
+
+
+
+Warning: Text content did not match. Server: "Server" Client: "Client"
+{' '}at span
+{' '}at App
+
+
+
+
+
+Warning: An error occurred during hydration. The server HTML was replaced with client content in \.
+
+
+
+
+
+Uncaught Error: Text content does not match server-rendered HTML.
+{' '}at checkForUnmatchedText
+{' '}...
+
+
+
+
+
+We now log a single message with a diff of the mismatch:
+
+
+
+
+
+
+Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if an SSR-ed Client Component used:{'\n'}
+\- A server/client branch `if (typeof window !== 'undefined')`.
+\- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+\- Date formatting in a user's locale which doesn't match the server.
+\- External changing data without sending a snapshot of it along with the HTML.
+\- Invalid HTML tag nesting.{'\n'}
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.{'\n'}
+https://react.dev/link/hydration-mismatch {'\n'}
+{' '}\
+{' '}\
+{'+ '}Client
+{'- '}Server{'\n'}
+{' '}at throwOnHydrationMismatch
+{' '}...
+
+
+
+
+
+### `
` as a provider {/*context-as-a-provider*/}
+
+In React 19, you can render `` as a provider instead of ``:
+
+
+```js {5,7}
+const ThemeContext = createContext('');
+
+function App({children}) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+New Context providers can use `` and we will be publishing a codemod to convert existing providers. In future versions we will deprecate ``.
+
+### Cleanup functions for refs {/*cleanup-functions-for-refs*/}
+
+We now support returning a cleanup function from `ref` callbacks:
+
+```js {7-9}
+
+
+Previously, React would call `ref` functions with `null` when unmounting the component. If your `ref` returns a cleanup function, React will now skip this step.
+
+In future versions, we will deprecate calling refs with `null` when unmounting components.
+
+
+
+Due to the introduction of ref cleanup functions, returning anything else from a `ref` callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns, for example:
+
+```diff [[1, 1, "("], [1, 1, ")"], [2, 2, "{", 15], [2, 2, "}", 1]]
+- (instance = current)} />
++
{instance = current}} />
+```
+
+The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was _supposed_ to be a cleanup function or if you didn't want to return a cleanup function.
+
+You can codemod this pattern with [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return).
+
+### `useDeferredValue` initial value {/*use-deferred-value-initial-value*/}
+
+We've added an `initialValue` option to `useDeferredValue`:
+
+```js [[1, 1, "deferredValue"], [1, 4, "deferredValue"], [2, 4, "''"]]
+function Search({deferredValue}) {
+ // On initial render the value is ''.
+ // Then a re-render is scheduled with the deferredValue.
+ const value = useDeferredValue(deferredValue, '');
+
+ return (
+
+ );
+}
+````
+
+When
initialValue is provided, `useDeferredValue` will return it as `value` for the initial render of the component, and schedules a re-render in the background with the
deferredValue returned.
+
+For more, see [`useDeferredValue`](/reference/react/useDeferredValue).
+
+### Support for Document Metadata {/*support-for-metadata-tags*/}
+
+In HTML, document metadata tags like `
`, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application.
+
+In React 19, we're adding support for rendering document metadata tags in components natively:
+
+```js {5-8}
+function BlogPost({post}) {
+ return (
+ <article>
+ <h1>{post.title}</h1>
+ <title>{post.title}
+
+
+
+
+ Eee equals em-see-squared...
+
+
+ );
+}
+```
+
+When React renders this component, it will see the `
` `<link>` and `<meta>` tags, and automatically hoist them to the `<head>` section of document. By supporting these metadata tags natively, we're able to ensure they work with client-only apps, streaming SSR, and Server Components.
+
+<Note>
+
+#### You may still want a Metadata library {/*you-may-still-want-a-metadata-library*/}
+
+For simple use cases, rendering Document Metadata as tags may be suitable, but libraries can offer more powerful features like overriding generic metadata with specific metadata based on the current route. These features make it easier for frameworks and libraries like [`react-helmet`](https://github.com/nfl/react-helmet) to support metadata tags, rather than replace them.
+
+</Note>
+
+For more info, see the docs for [`<title>`](/reference/react-dom/components/title), [`<link>`](/reference/react-dom/components/link), and [`<meta>`](/reference/react-dom/components/meta).
+
+### Support for stylesheets {/*support-for-stylesheets*/}
+
+Stylesheets, both externally linked (`<link rel="stylesheet" href="...">`) and inline (`<style>...</style>`), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity.
+
+In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules.
+
+```js {4,5,17}
+function ComponentOne() {
+ return (
+ <Suspense fallback="loading...">
+ <link rel="stylesheet" href="foo" precedence="default" />
+ <link rel="stylesheet" href="bar" precedence="high" />
+ <article class="foo-class bar-class">
+ {...}
+ </article>
+ </Suspense>
+ )
+}
+
+function ComponentTwo() {
+ return (
+ <div>
+ <p>{...}</p>
+ <link rel="stylesheet" href="baz" precedence="default" /> <-- will be inserted between foo & bar
+ </div>
+ )
+}
+```
+
+During Server Side Rendering React will include the stylesheet in the `<head>`, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `<head>` on the client before revealing the content of a Suspense boundary that depends on that stylesheet.
+
+During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. If you render this component from multiple places within your application React will only include the stylesheet once in the document:
+
+```js {5}
+function App() {
+ return <>
+ <ComponentOne />
+ ...
+ <ComponentOne /> // won't lead to a duplicate stylesheet link in the DOM
+ </>
+}
+```
+
+For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on.
+
+Style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature.
+
+For more details, read the docs for [`<link>`](/reference/react-dom/components/link) and [`<style>`](/reference/react-dom/components/style).
+
+### Support for async scripts {/*support-for-async-scripts*/}
+
+In HTML normal scripts (`<script src="...">`) and deferred scripts (`<script defer="" src="...">`) load in document order which makes rendering these kinds of scripts deep within your component tree challenging. Async scripts (`<script async="" src="...">`) however will load in arbitrary order.
+
+In React 19 we've included better support for async scripts by allowing you to render them anywhere in your component tree, inside the components that actually depend on the script, without having to manage relocating and deduplicating script instances.
+
+```js {4,15}
+function MyComponent() {
+ return (
+ <div>
+ <script async={true} src="..." />
+ Hello World
+ </div>
+ )
+}
+
+function App() {
+ <html>
+ <body>
+ <MyComponent>
+ ...
+ <MyComponent> // won't lead to duplicate script in the DOM
+ </body>
+ </html>
+}
+```
+
+In all rendering environments, async scripts will be deduplicated so that React will only load and execute the script once even if it is rendered by multiple different components.
+
+In Server Side Rendering, async scripts will be included in the `<head>` and prioritized behind more critical resources that block paint such as stylesheets, fonts, and image preloads.
+
+For more details, read the docs for [`<script>`](/reference/react-dom/components/script).
+
+### Support for preloading resources {/*support-for-preloading-resources*/}
+
+During initial document load and on client side updates, telling the Browser about resources that it will likely need to load as early as possible can have a dramatic effect on page performance.
+
+React 19 includes a number of new APIs for loading and preloading Browser resources to make it as easy as possible to build great experiences that aren't held back by inefficient resource loading.
+
+```js
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
+function MyComponent() {
+ preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
+ preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
+ preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
+ prefetchDNS('https://...') // when you may not actually request anything from this host
+ preconnect('https://...') // when you will request something but aren't sure what
+}
+```
+```html
+<!-- the above would result in the following DOM/HTML -->
+<html>
+ <head>
+ <!-- links/scripts are prioritized by their utility to early loading, not call order -->
+ <link rel="prefetch-dns" href="https://...">
+ <link rel="preconnect" href="https://...">
+ <link rel="preload" as="font" href="https://.../path/to/font.woff">
+ <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
+ <script async="" src="https://.../path/to/some/script.js"></script>
+ </head>
+ <body>
+ ...
+ </body>
+</html>
+```
+
+These APIs can be used to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also make client updates faster by prefetching a list of resources used by an anticipated navigation and then eagerly preloading those resources on click or even on hover.
+
+For more details see [Resource Preloading APIs](/reference/react-dom#resource-preloading-apis).
+
+### Compatibility with third-party scripts and extensions {/*compatibility-with-third-party-scripts-and-extensions*/}
+
+We've improved hydration to account for third-party scripts and browser extensions.
+
+When hydrating, if an element that renders on the client doesn't match the element found in the HTML from the server, React will force a client re-render to fix up the content. Previously, if an element was inserted by third-party scripts or browser extensions, it would trigger a mismatch error and client render.
+
+In React 19, unexpected tags in the `<head>` and `<body>` will be skipped over, avoiding the mismatch errors. If React needs to re-render the entire document due to an unrelated hydration mismatch, it will leave in place stylesheets inserted by third-party scripts and browser extensions.
+
+### Better error reporting {/*error-handling*/}
+
+We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred.
+
+This resulted in three errors for every caught error:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: hit
+{' '}at Throws
+{' '}at renderWithHooks
+{' '}...
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: hit<span className="ms-2 text-gray-30">{' <--'} Duplicate</span>
+{' '}at Throws
+{' '}at renderWithHooks
+{' '}...
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+The above error occurred in the Throws component:
+{' '}at Throws
+{' '}at ErrorBoundary
+{' '}at App{'\n'}
+React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+In React 19, we log a single error with all the error information included:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Error: hit
+{' '}at Throws
+{' '}at renderWithHooks
+{' '}...{'\n'}
+The above error occurred in the Throws component:
+{' '}at Throws
+{' '}at ErrorBoundary
+{' '}at App{'\n'}
+React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
+{' '}at ErrorBoundary
+{' '}at App
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+Additionally, we've added two new root options to complement `onRecoverableError`:
+
+- `onCaughtError`: called when React catches an error in an Error Boundary.
+- `onUncaughtError`: called when an error is thrown and not caught by an Error Boundary.
+- `onRecoverableError`: called when an error is thrown and automatically recovered.
+
+For more info and examples, see the docs for [`createRoot`](/reference/react-dom/client/createRoot) and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
+
+### Support for Custom Elements {/*support-for-custom-elements*/}
+
+React 19 adds full support for custom elements and passes all tests on [Custom Elements Everywhere](https://custom-elements-everywhere.com/).
+
+In past versions, using Custom Elements in React has been difficult because React treated unrecognized props as attributes rather than properties. In React 19, we've added support for properties that works on the client and during SSR with the following strategy:
+
+- **Server Side Rendering**: props passed to a custom element will render as attributes if their type is a primitive value like `string`, `number`, or the value is `true`. Props with non-primitive types like `object`, `symbol`, `function`, or value `false` will be omitted.
+- **Client Side Rendering**: props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes.
+
+Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design and implementation of Custom Element support in React.
+
+
+#### How to upgrade {/*how-to-upgrade*/}
+See the [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes.
+
+_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
new file mode 100644
index 000000000..9ced6231c
--- /dev/null
+++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
@@ -0,0 +1,320 @@
+---
+title: "Sunsetting Create React App"
+author: Matt Carroll and Ricky Hanlon
+date: 2025/02/14
+description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch.
+---
+
+February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
+
+---
+
+<Intro>
+
+Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild.
+
+We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch).
+
+</Intro>
+
+-----
+
+When we released Create React App in 2016, there was no clear way to build a new React app.
+
+To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features.
+
+Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience.
+
+This model became so popular that there's an entire category of tools working this way today.
+
+## Deprecating Create React App {/*deprecating-create-react-app*/}
+
+Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
+
+However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App.
+
+Starting today, if you install a new app, you will see a deprecation warning:
+
+<ConsoleBlockMulti>
+<ConsoleLogLine level="error">
+
+create-react-app is deprecated.
+{'\n\n'}
+You can find a list of up-to-date React frameworks on react.dev
+For more info see: react.dev/link/cra
+{'\n\n'}
+This error message will only be shown once per install.
+
+</ConsoleLogLine>
+</ConsoleBlockMulti>
+
+We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+
+## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
+We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server.
+
+For existing apps, these guides will help you migrate to a client-only SPA:
+
+* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app)
+* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
+* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
+
+## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
+
+If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild.
+
+For existing apps, these guides will help you migrate to a build tool:
+
+* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
+* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/)
+* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
+
+To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch).
+
+<DeepDive>
+
+#### Do I need a framework? {/*do-i-need-a-framework*/}
+
+Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework.
+
+Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself.
+
+However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild.
+
+</DeepDive>
+
+Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks).
+
+## Limitations of Build Tools {/*limitations-of-build-tools*/}
+
+Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build.
+
+For example, if you're building an internal admin tool, you can start with a landing page:
+
+```js
+export default function App() {
+ return (
+ <div>
+ <h1>Welcome to the Admin Tool!</h1>
+ </div>
+ )
+}
+```
+
+This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app.
+
+Most production apps need solutions to problems like routing, data fetching, and code splitting.
+
+### Routing {/*routing*/}
+
+Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time:
+
+```js
+import {useState} from 'react';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+export default function App() {
+ // ❌ Routing in state does not create URLs
+ const [route, setRoute] = useState('home');
+ return (
+ <div>
+ {route === 'home' && <Home />}
+ {route === 'dashboard' && <Dashboard />}
+ </div>
+ )
+}
+```
+
+This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes:
+
+```js
+import {RouterProvider, createBrowserRouter} from 'react-router';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Each route has it's own URL
+const router = createBrowserRouter([
+ {path: '/', element: <Home />},
+ {path: '/dashboard', element: <Dashboard />}
+]);
+
+export default function App() {
+ return (
+ <RouterProvider value={router} />
+ )
+}
+```
+
+With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library.
+
+There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it.
+
+### Data Fetching {/*data-fetching*/}
+
+Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data.
+
+But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading:
+
+```js
+export default function Dashboard() {
+ const [data, setData] = useState(null);
+
+ // ❌ Fetching data in a component causes network waterfalls
+ useEffect(() => {
+ fetch('/api/data')
+ .then(response => response.json())
+ .then(data => setData(data));
+ }, []);
+
+ return (
+ <div>
+ {data.map(item => <div key={item.id}>{item.name}</div>)}
+ </div>
+ )
+}
+```
+
+Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
+
+These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches:
+
+```js
+export async function loader() {
+ const response = await fetch(`/api/data`);
+ const data = await response.json();
+ return data;
+}
+
+// ✅ Fetching data in parallel while the code is downloading
+export default function Dashboard({loaderData}) {
+ return (
+ <div>
+ {loaderData.map(item => <div key={item.id}>{item.name}</div>)}
+ </div>
+ )
+}
+```
+
+On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience.
+
+However, this requires correctly configuring the loaders in your app and trades off complexity for performance.
+
+### Code Splitting {/*code-splitting*/}
+
+Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all.
+
+This means your app is shipped as a single bundle:
+
+```txt
+- bundle.js 75kb
+```
+
+But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on.
+
+```txt
+- core.js 25kb
+- home.js 25kb
+- dashboard.js 25kb
+```
+
+One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded:
+
+```js
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Routes are downloaded before rendering
+const router = createBrowserRouter([
+ {path: '/', lazy: () => import('./Home')},
+ {path: '/dashboard', lazy: () => import('Dashboard')}
+]);
+```
+
+Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns.
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the limitations of Create React App.
+
+Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like:
+
+<div style={{display: 'flex', width: '100%', justifyContent: 'space-around'}}>
+ <ul>
+ <li>Accessibility</li>
+ <li>Asset loading</li>
+ <li>Authentication</li>
+ <li>Caching</li>
+ </ul>
+ <ul>
+ <li>Error handling</li>
+ <li>Mutating data</li>
+ <li>Navigations</li>
+ <li>Optimistic updates</li>
+ </ul>
+ <ul>
+ <li>Progressive enhancement</li>
+ <li>Server-side rendering</li>
+ <li>Static site generation</li>
+ <li>Streaming</li>
+ </ul>
+</div>
+
+All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve.
+
+## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/}
+
+Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users.
+
+This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks".
+
+Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects.
+
+Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps.
+
+<DeepDive>
+
+#### Server rendering is optional {/*server-rendering-is-optional*/}
+
+The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app.
+
+In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation.
+
+Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy.
+
+Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app.
+
+#### What About Server Components {/*server-components*/}
+
+The frameworks we recommend also include support for React Server Components.
+
+Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app.
+
+See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info.
+
+</DeepDive>
+
+<Note>
+
+#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/}
+
+A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO).
+
+While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen.
+
+This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+</Note>
+
+---
+
+_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
+
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
new file mode 100644
index 000000000..2ebbf3bae
--- /dev/null
+++ b/src/content/blog/2025/04/21/react-compiler-rc.md
@@ -0,0 +1,128 @@
+---
+title: "React Compiler RC"
+author: Lauren Tan and Mofei Zhang
+date: 2025/04/21
+description: We are releasing the compiler's first Release Candidate (RC) today.
+
+---
+
+April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
+
+---
+
+<Intro>
+
+The React team is excited to share new updates:
+
+</Intro>
+
+1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
+2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
+3. We've added support for swc and are working with oxc to support Babel-free builds.
+
+---
+
+[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
+
+We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
+
+## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
+To install the RC:
+
+npm
+<TerminalBlock>
+{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+pnpm
+<TerminalBlock>
+{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+yarn
+<TerminalBlock>
+{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
+
+We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
+
+You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
+
+## Feedback {/*feedback*/}
+During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+
+## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
+If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
+
+To install:
+
+npm
+<TerminalBlock>
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
+</TerminalBlock>
+
+pnpm
+<TerminalBlock>
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
+</TerminalBlock>
+
+yarn
+<TerminalBlock>
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
+</TerminalBlock>
+
+```js
+// eslint.config.js
+import * as reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+ // Flat Config (eslint 9+)
+ reactHooks.configs.recommended,
+
+ // Legacy Config
+ reactHooks.configs['recommended-latest']
+];
+```
+
+To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
+
+The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
+
+## swc support (experimental) {/*swc-support-experimental*/}
+React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
+
+In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
+
+We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
+
+Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
+
+## Upgrading React Compiler {/*upgrading-react-compiler*/}
+React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
+
+However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
+
+In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
+
+If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
+
+## Roadmap to Stable {/*roadmap-to-stable*/}
+*This is not a final roadmap, and is subject to change.*
+
+After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
+
+* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
+* ✅ Public Beta: Available today, for feedback from library authors.
+* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
+* General Availability: After final feedback period from the community.
+
+Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+
+---
+
+Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
new file mode 100644
index 000000000..c7f740091
--- /dev/null
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -0,0 +1,14366 @@
+---
+title: "React Labs: View Transitions, Activity, and more"
+author: Ricky Hanlon
+date: 2025/04/23
+description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+---
+
+April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+
+---
+
+<Intro>
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+
+</Intro>
+
+
+<Note>
+
+React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
+
+We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required).
+
+For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+
+</Note>
+
+Today, we're excited to release documentation for two new experimental features that are ready for testing:
+
+- [View Transitions](#view-transitions)
+- [Activity](#activity)
+
+We're also sharing updates on new features currently in development:
+- [React Performance Tracks](#react-performance-tracks)
+- [Compiler IDE Extension](#compiler-ide-extension)
+- [Automatic Effect Dependencies](#automatic-effect-dependencies)
+- [Fragment Refs](#fragment-refs)
+- [Concurrent Stores](#concurrent-stores)
+
+---
+
+# New Experimental Features {/*new-experimental-features*/}
+
+View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
+
+You can try them by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+
+Read on to learn how to use these features in your app, or check out the newly published docs:
+
+- [`<ViewTransition>`](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition.
+- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
+- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show parts of the UI.
+
+## View Transitions {/*view-transitions*/}
+
+React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
+
+To opt-in to animating an element, wrap it in the new `<ViewTransition>` component:
+
+```js
+// "what" to animate.
+<ViewTransition>
+ <div>animate me</div>
+</ViewTransition>
+```
+
+This new component lets you declaratively define "what" to animate when an animation is activated.
+
+You can define "when" to animate by using one of these three triggers for a View Transition:
+
+```js
+// "when" to animate.
+
+// Transitions
+startTransition(() => setState(...));
+
+// Deferred Values
+const deferred = useDeferredValue(value);
+
+// Suspense
+<Suspense fallback={<Fallback />}>
+ <div>Loading...</div>
+</Suspense>
+```
+
+By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions:
+
+```
+// "how" to animate.
+::view-transition-old(*) {
+ animation: 300ms ease-out fade-out;
+}
+::view-transition-new(*) {
+ animation: 300ms ease-in fade-in;
+}
+```
+
+When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
+
+If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+
+In this post, let's take a look at a few examples of how to use View Transitions.
+
+We'll start with this app, which doesn't animate any of the following interactions:
+- Click a video to view the details.
+- Click "back" to go back to the feed.
+- Type in the list to filter the videos.
+
+<Sandpack>
+
+```js src/App.js active
+import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // 🚩This version doesn't include any animations yet
+ return url === '/' ? <Home /> : <TalkDetails />;
+}
+```
+
+```js src/Details.js
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+<Note>
+
+#### View Transitions do not replace CSS and JS driven animations {/*view-transitions-do-not-replace-css-and-js-driven-animations*/}
+
+View Transitions are meant to be used for UI transitions such as navigation, expanding, opening, or re-ordering. They are not meant to replace all the animations in your app.
+
+In our example app above, notice that there are already animations when you click the "like" button and in the Suspense fallback glimmer. These are good use cases for CSS animations because they are animating a specific element.
+
+</Note>
+
+### Animating navigations {/*animating-navigations*/}
+
+Our app includes a Suspense-enabled router, with [page transitions already marked as Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), which means navigations are performed with `startTransition`:
+
+```js
+function navigate(url) {
+ startTransition(() => {
+ go(url);
+ });
+}
+```
+
+`startTransition` is a View Transition trigger, so we can add `<ViewTransition>` to animate between pages:
+
+```js
+// "what" to animate
+<ViewTransition key={url}>
+ {url === '/' ? <Home /> : <TalkDetails />}
+</ViewTransition>
+```
+
+When the `url` changes, the `<ViewTransition>` and new route are rendered. Since the `<ViewTransition>` was updated inside of `startTransition`, the `<ViewTransition>` is activated for an animation.
+
+
+By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
+
+<Sandpack>
+
+```js src/App.js active
+import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // Use ViewTransition to animate between pages.
+ // No additional CSS needed by default.
+ return (
+ <ViewTransition>
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import {unstable_ViewTransition as 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">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext,use,useTransition,useLayoutEffect,useEffect} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+
+
+
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+
+ function navigateBack(url) {
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation.
+
+If you're curious how this works, see the docs for [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work)
+
+<Note>
+
+#### Opting out of `<ViewTransition>` animations {/*opting-out-of-viewtransition-animations*/}
+
+In this example, we're wrapping the root of the app in `<ViewTransition>` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
+
+To fix, we're wrapping route children with `"none"` so each page can control its own animation:
+
+```js
+// Layout.js
+<ViewTransition default="none">
+ {children}
+</ViewTransition>
+```
+
+In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
+
+</Note>
+
+### Customizing animations {/*customizing-animations*/}
+
+By default, `<ViewTransition>` includes the default cross-fade from the browser.
+
+To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
+
+For example, we can slow down the `default` cross fade animation:
+
+```js
+<ViewTransition default="slow-fade">
+ <Home />
+</ViewTransition>
+```
+
+And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class):
+
+```css
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+Now, the cross fade is slower:
+
+<Sandpack>
+
+```js src/App.js active
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Define a default animation of .slow-fade.
+ // See animations.css for the animation definition.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Define .slow-fade using view transition classes */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+See [Styling View Transitions](/reference/react/ViewTransition#styling-view-transitions) for a full guide on styling `<ViewTransition>`.
+
+### Shared Element Transitions {/*shared-element-transitions*/}
+
+When two pages include the same element, often you want to animate it from one page to the next.
+
+To do this you can add a unique `name` to the `<ViewTransition>`:
+
+```js
+<ViewTransition name={`video-${video.id}`}>
+ <Thumbnail video={video} />
+</ViewTransition>
+```
+
+Now the video thumbnail animates between the two pages:
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Keeping our default slow-fade.
+ // This allows the content not in the shared
+ // element transition to cross-fade.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js active
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransition>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). 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.
+
+For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element).
+
+### Animating based on cause {/*animating-based-on-cause*/}
+
+Sometimes, you may want elements to animate differently based on how it was triggered. For this use case, we've added a new API called `addTransitionType` to specify the cause of a transition:
+
+```js {4,11}
+function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+}
+function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+}
+```
+
+With transition types, you can provide custom animations via props to `<ViewTransition>`. Let's add a shared element transition to the header for "6 Videos" and "Back":
+
+```js {4,5}
+<ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+</ViewTransition>
+```
+
+Here we pass a `share` prop to define how to animate based on the transition type. When the share transition activates from `nav-forward`, the view transition class `slide-forward` is applied. When it's from `nav-back`, the `slide-back` animation is activated. Let's define these animations in CSS:
+
+```css
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: ...
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: ...
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: ...
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: ...
+}
+```
+
+Now we can animate the header along with thumbnail based on navigation type:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Keeping our default slow-fade.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js active
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* New keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Previously defined animations. */
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Animating Suspense Boundaries {/*animating-suspense-boundaries*/}
+
+Suspense will also activate View Transitions.
+
+To animate the fallback to content, we can wrap `Suspense` with `<ViewTranstion>`:
+
+```js
+<ViewTransition>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo />
+ </Suspense>
+</ViewTransition>
+```
+
+By adding this, the fallback will cross-fade into the content. Click a video and see the video info animate in:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js active
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({ id }) {
+ // Cross-fade the fallback to content.
+ return (
+ <ViewTransition default="slow-fade">
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={id} />
+ </Suspense>
+ </ViewTransition>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <div>
+ <div className="fit fallback title"></div>
+ <div className="fit fallback description"></div>
+ </div>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <div>
+ <p className="fit info-title">{details.title}</p>
+ <p className="fit info-description">{details.description}</p>
+ </div>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+/* Slide the content up */
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Define the new keyframes */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+/* Previously defined animations below */
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+We can also provide custom animations using an `exit` on the fallback, and `enter` on the content:
+
+```js {3,8}
+<Suspense
+ fallback={
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+>
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+</Suspense>
+```
+
+Here's how we'll define `slide-down` and `slide-up` with CSS:
+
+```css {1, 6}
+::view-transition-old(.slide-down) {
+ /* Slide the fallback down */
+ animation: ...;
+}
+
+::view-transition-new(.slide-up) {
+ /* Slide the content up */
+ animation: ...;
+}
+```
+
+Now, the Suspense content replaces the fallback with a sliding animation:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js active
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({ id }) {
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+/* Slide the content up */
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Define the new keyframes */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+/* Previously defined animations below */
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+
+### Animating Lists {/*animating-lists*/}
+
+You can also use `<ViewTransition>` to animate lists of items as they re-order, like in a searchable list of items:
+
+```js {3,5}
+<div className="videos">
+ {filteredVideos.map((video) => (
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+</div>
+```
+
+To activate the ViewTransition, we can use `useDeferredValue`:
+
+```js {2}
+const [searchText, setSearchText] = useState('');
+const deferredSearchText = useDeferredValue(searchText);
+const filteredVideos = filterVideos(videos, deferredSearchText);
+```
+
+Now the items animate as you type in the search bar:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animation for Suspense */
+::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;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Final result {/*final-result*/}
+
+By adding a few `<ViewTransition>` components and a few lines of CSS, we were able to add all the animations above into the final result.
+
+We're excited about View Transitions and think they will level up the apps you're able to build. They're ready to start trying today in the experimental channel of React releases.
+
+Let's remove the slow fade, and take a look at the final result:
+
+<Sandpack>
+
+```js src/App.js
+import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // Animate with a cross fade between pages.
+ return (
+ <ViewTransition key={url}>
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide animations for Suspense the fallback down */
+::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;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+If you're curious to know more about how they work, check out [How Does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+
+_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._
+
+---
+
+## Activity {/*activity*/}
+
+<Note>
+
+**`<Activity />` is now available in React’s Canary channel.**
+
+[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+
+</Note>
+
+In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
+
+We're now ready to share the API and how it works, so you can start testing it in experimental React versions.
+
+`<Activity>` is a new component to hide and show parts of the UI:
+
+```js [[1, 1, "'visible'"], [2, 1, "'hidden'"]]
+<Activity mode={isVisible ? 'visible' : 'hidden'}>
+ <Page />
+</Activity>
+```
+
+When an Activity is <CodeStep step={1}>visible</CodeStep> it's rendered as normal. When an Activity is <CodeStep step={2}>hidden</CodeStep> it is unmounted, but will save its state and continue to render at a lower priority than anything visible on screen.
+
+You can use `Activity` to save state for parts of the UI the user isn't using, or pre-render parts that a user is likely to use next.
+
+Let's look at some examples improving the View Transition examples above.
+
+<Note>
+
+**Effects don’t mount when an Activity is hidden.**
+
+When an `<Activity>` is `hidden`, Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
+
+In practice, this works as expected if you have followed the [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side effects.
+
+</Note>
+
+### Restoring state with Activity {/*restoring-state-with-activity*/}
+
+When a user navigates away from a page, it's common to stop rendering the old page:
+
+```js {6,7}
+function App() {
+ const { url } = useRouter();
+
+ return (
+ <>
+ {url === '/' && <Home />}
+ {url !== '/' && <Details />}
+ </>
+ );
+}
+```
+
+However, this means if the user goes back to the old page, all of the previous state is lost. For example, if the `<Home />` page has an `<input>` field, when the user leaves the page the `<input>` is unmounted, and all of the text they had typed is lost.
+
+Activity allows you to keep the state around as the user changes pages, so when they come back they can resume where they left off. This is done by wrapping part of the tree in `<Activity>` and toggling the `mode`:
+
+```js {6-8}
+function App() {
+ const { url } = useRouter();
+
+ return (
+ <>
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ {url !== '/' && <Details />}
+ </>
+ );
+}
+```
+
+With this change, we can improve on our View Transitions example above. Before, when you searched for a video, selected one, and returned, your search filter was lost. With Activity, your search filter is restored and you can pick up where you left off.
+
+Try searching for a video, selecting it, and clicking "back":
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ return (
+ // View Transitions know about Activity
+ <ViewTransition>
+ {/* Render Home in Activity so we don't lose state */}
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ {url !== '/' && <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::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;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Pre-rendering with Activity {/*prerender-with-activity*/}
+
+Sometimes, you may want to prepare the next part of the UI a user is likely to use ahead of time, so it's ready by the time they are ready to use it. This is especially useful if the next route needs to suspend on data it needs to render, because you can help ensure the data is already fetched before the user navigates.
+
+For example, our app currently needs to suspend to load the data for each video when you select one. We can improve this by rendering all of the pages in a hidden `<Activity>` until the user navigates:
+
+```js {2,5,8}
+<ViewTransition>
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
+ <Details id={id} />
+ </Activity>
+ <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
+ <Details id={id} />
+ </Activity>
+<ViewTransition>
+```
+
+With this update, if the content on the next page has time to pre-render, it will animate in without the Suspense fallback. Click a video, and notice that the video title and description on the Details page render immediately, without a fallback:
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'
+
+export default function App() {
+ const { url } = useRouter();
+ const videoId = url.split("/").pop();
+ const videos = use(fetchVideos());
+
+ return (
+ <ViewTransition>
+ {/* Render videos in Activity to pre-render them */}
+ {videos.map(({id}) => (
+ <Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}>
+ <Details id={id}/>
+ </Activity>
+ ))}
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content.
+ // If this is pre-rendered then the fallback
+ // won't need to show.
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details({id}) {
+ const { url, navigateBack } = useRouter();
+ const video = use(fetchVideo(id));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as 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">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::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;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Server-Side Rendering with Activity {/*server-side-rendering-with-activity*/}
+
+When using Activity on a page that uses server-side rendering (SSR), there are additional optimizations.
+
+If part of the page is rendered with `mode="hidden"`, then it will not be included in the SSR response. Instead, React will schedule a client render for the content inside Activity while the rest of the page hydrates, prioritizing the visible content on screen.
+
+For parts of the UI rendered with `mode="visible"`, React will de-prioritize hydration of content within Activity, similar to how Suspense content is hydrated at a lower priority. If the user interacts with the page, we'll prioritize hydration within the boundary if needed.
+
+These are advanced use cases, but they show the additional benefits considered with Activity.
+
+### Future modes for Activity {/*future-modes-for-activity*/}
+
+In the future, we may add more modes to Activity.
+
+For example, a common use case is rendering a modal, where the previous "inactive" page is visible behind the "active" modal view. The "hidden" mode does not work for this use case because it's not visible and not included in SSR.
+
+Instead, we're considering a new mode that would keep the content visible—and included in SSR—but keep it unmounted and de-prioritize updates. This mode may also need to "pause" DOM updates, since it can be distracting to see backgrounded content updating while a modal is open.
+
+Another mode we're considering for Activity is the ability to automatically destroy state for hidden Activities if there is too much memory being used. Since the component is already unmounted, it may be preferable to destroy state for the least recently used hidden parts of the app rather than consume too many resources.
+
+These are areas we're still exploring, and we'll share more as we make progress. For more information on what Activity includes today, [check out the docs](/reference/react/Activity).
+
+---
+
+# Features in development {/*features-in-development*/}
+
+We're also developing features to help solve the common problems below.
+
+As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
+
+When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
+
+As these features progress, we'll announce them on the blog with docs included so you can try them out.
+
+## React Performance Tracks {/*react-performance-tracks*/}
+
+We're working on a new set of custom tracks to performance profilers using browser APIs that [allow adding custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to provide more information about the performance of your React app.
+
+This feature is still in progress, so we're not ready to publish docs to fully release it as an experimental feature yet. You can get a sneak preview when using an experimental version of React, which will automatically add the performance tracks to profiles:
+
+<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
+ <picture >
+ <source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" />
+ <img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" />
+ </picture>
+ <picture >
+ <source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" />
+ <img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" />
+ </picture>
+</div>
+
+There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks.
+
+Once we solve those issues, we'll publish experimental docs and share that it's ready to try.
+
+---
+
+## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+
+When we released hooks, we had three motivations:
+
+- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy.
+- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
+- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
+
+Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
+
+### Effects can be hard {/*effects-can-be-hard*/}
+
+Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand.
+
+We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
+
+We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+
+Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
+
+```js
+useEffect(() => {
+ // Your Effect connected to the room specified with roomId...
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ // ...until it disconnected
+ connection.disconnect();
+ };
+}, [roomId]);
+```
+
+Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective.
+
+### Effects without dependencies {/*effects-without-dependencies*/}
+
+Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed.
+
+We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'.
+
+When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you:
+
+```js
+useEffect(() => {
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ connection.disconnect();
+ };
+}); // compiler inserted dependencies.
+```
+
+With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
+
+Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+
+---
+
+## Compiler IDE Extension {/*compiler-ide-extension*/}
+
+Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
+
+We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
+
+Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](#automatic-effect-dependencies).
+
+The IDE extension is still an early exploration, but we'll share our progress in future updates.
+
+---
+
+## Fragment Refs {/*fragment-refs*/}
+
+Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19).
+
+We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs.
+
+Fragment refs are still being researched. We'll share more when we're closer to having the final API finished.
+
+---
+
+## Gesture Animations {/*gesture-animations*/}
+
+We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+
+Gestures present new challenges for a few reasons:
+
+- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
+- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
+- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
+
+We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping `<ViewTransition>`, and will revisit gestures afterward.
+
+---
+
+## Concurrent Stores {/*concurrent-stores*/}
+
+When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated.
+
+Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
+
+Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
+
+```js
+const value = use(store);
+```
+
+Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+
+This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+
+---
+
+_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index fc8a2969b..a7a897634 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -4,12 +4,62 @@ title: React Blog
<Intro>
-This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. You can also follow the [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
+
+You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
</Intro>
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
+<BlogCard title="React Labs: View Transitions, Activity, and more" date="April 23, 2025" url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
+
+</BlogCard>
+
+<BlogCard title="React Compiler RC" date="April 21, 2025" url="/blog/2025/04/21/react-compiler-rc">
+
+We are releasing the compiler's first Release Candidate (RC) today.
+
+</BlogCard>
+
+<BlogCard title="Sunsetting Create React App" date="February 14, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
+
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
+
+</BlogCard>
+
+<BlogCard title="React v19 " date="December 5, 2024" url="/blog/2024/12/05/react-19">
+
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+
+</BlogCard>
+
+<BlogCard title="React Compiler Beta Release" date="October 21, 2024" url="/blog/2024/10/21/react-compiler-beta-release">
+
+We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
+
+</BlogCard>
+
+<BlogCard title="React Conf 2024 Recap" date="May 22, 2024" url="/blog/2024/05/22/react-conf-2024-recap">
+
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
+
+</BlogCard>
+
+<BlogCard title="React 19 Upgrade Guide" date="April 25, 2024" url="/blog/2024/04/25/react-19-upgrade-guide">
+
+The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
+
+</BlogCard>
+
+<BlogCard title="React Labs: What We've Been Working On – February 2024" date="February 15, 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024">
+
+In React Labs posts, we write about projects in active research and development. Since our last update, we've made significant progress on React Compiler, new features, and React 19, and we'd like to share what we learned.
+
+</BlogCard>
+
<BlogCard title="React Canaries: Incremental Feature Rollout Outside Meta" date="May 3, 2023" url="/blog/2023/05/03/react-canaries">
Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index c87a92979..bfe67f55a 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -4,7 +4,7 @@ title: Acknowledgements
<Intro>
-React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/blob/main/AUTHORS)
+React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/graphs/contributors)
</Intro>
@@ -16,6 +16,7 @@ We'd like to recognize a few people who have made significant contributions to R
* [Andreas Svensson](https://github.com/syranide)
* [Alex Krolick](https://github.com/alexkrolick)
* [Alexey Pyltsyn](https://github.com/lex111)
+* [Andrey Lunyov](https://github.com/alunyov)
* [Brandon Dail](https://github.com/aweary)
* [Brian Vaughn](https://github.com/bvaughn)
* [Caleb Meredith](https://github.com/calebmer)
@@ -35,6 +36,8 @@ We'd like to recognize a few people who have made significant contributions to R
* [Joe Critchley](https://github.com/joecritch)
* [Jeff Morrison](https://github.com/jeffmo)
* [Luna Ruan](https://github.com/lunaruan)
+* [Luna Wei](https://github.com/lunaleaps)
+* [Noah Lemen](https://github.com/noahlemen)
* [Kathryn Middleton](https://github.com/kmiddleton14)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
@@ -50,15 +53,16 @@ We'd like to recognize a few people who have made significant contributions to R
* [Samuel Susla](https://github.com/sammy-SC)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
-* [Sean Keegan](https://github.com/seanryankeegan)
+* [Sathya Gunasekaran](https://github.com/gsathya)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sunil Pai](https://github.com/threepointone)
+* [Tianyu Yao](https://github.com/)
* [Tim Yung](https://github.com/yungsters)
* [Xuan Huang](https://github.com/huxpro)
This list is not exhaustive.
-We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/)
+We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/)
## Additional Thanks {/*additional-thanks*/}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index d8503ef1e..2badd581a 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,67 +10,221 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### React Paris 2024 {/*react-paris-2024*/}
-March 22, 2024. In-person in Paris, France + Remote (hybrid)
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
-[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
-### Epic Web Conf 2024 {/*epic-web-2024*/}
-April 10 - 11, 2024. In-person in Park City, UT, USA
+### React Alicante 2025 {/*react-alicante-2025*/}
+October 2-4, 2025. Alicante, Spain.
-[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
-### React Miami 2024 {/*react-miami-2024*/}
-April 19 - 20, 2024. In-person in Miami, FL, USA
+### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
+October 04, 2025. Nairobi, Kenya
-[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
-### React Connection 2024 {/*react-connection-2024*/}
-April 22, 2024. In-person in Paris, France
+### React Conf 2025 {/*react-conf-2025*/}
+October 7-8, 2025. Henderson, Nevada, USA and free livestream
-[Website](https://reactconnection.io/) - [Twitter](https://twitter.com/ReactConn)
+[Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev)
-### React Native Connection 2024 {/*react-native-connection-2024*/}
-April 23, 2024. In-person in Paris, France
+### React India 2025 {/*react-india-2025*/}
+October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day
-[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
-### React Conf 2024 {/*react-conf-2024*/}
-May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
-[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
+### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
+November 6-7, 2025. In-person in New Delhi, India
-### App.js Conf 2024 {/*appjs-conf-2024*/}
-May 22 - 24, 2024. In-person in Kraków, Poland + remote
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Summit US 2025 {/*react-summit-us-2025*/}
+November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit)
+
+### React Advanced London 2025 {/*react-advanced-london-2025*/}
+November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### React Paris 2026 {/*react-paris-2026*/}
+March 26 - 27, 2026. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+
+
+## Past Conferences {/*past-conferences*/}
+
+
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Paris 2025 {/*react-paris-2025*/}
+March 20 - 21, 2025. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
+
+### React Native Connection 2025 {/*react-native-connection-2025*/}
+April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
+
+[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### reactjsday 2024 {/*reactjsday-2024*/}
+October 25, 2024. In-person in Verona, Italy + online (hybrid event)
+
+[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3)
+
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+
+### React Rally 2024 🐙 {/*react-rally-2024*/}
+August 12-13, 2024. Park City, UT, USA
+
+[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
+
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
+### React Nexus 2024 {/*react-nexus-2024*/}
+July 04 & 05, 2024. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
[Website](https://reactsummit.com/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+### React Norway 2024 {/*react-norway-2024*/}
+June 14, 2024. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+
### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
June 12 - June 14, 2024. Atlanta, GA, USA
[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
-### React Norway 2024 {/*react-norway-2024*/}
-June 14, 2024. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+### Frontend Nation 2024 {/*frontend-nation-2024*/}
+June 4 - 7, 2024. Online
-[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
-### React Nexus 2024 {/*react-nexus-2024*/}
-July 04 & 05, 2024. Bangalore, India (In-person event)
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
-[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-### React India 2024 {/*react-india-2024*/}
-October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+### React Conf 2024 {/*react-conf-2024*/}
+May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
-[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
-## Past Conferences {/*past-conferences*/}
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
+### React Miami 2024 {/*react-miami-2024*/}
+April 19 - 20, 2024. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
+### Epic Web Conf 2024 {/*epic-web-2024*/}
+April 10 - 11, 2024. In-person in Park City, UT, USA
+
+[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+
+### React Paris 2024 {/*react-paris-2024*/}
+March 22, 2024. In-person in Paris, France + Remote (hybrid)
+
+[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWhUzgvr2Nys3kZBBLcY0TA7)
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md
index cbdbf7d7f..27b32a18f 100644
--- a/src/content/community/docs-contributors.md
+++ b/src/content/community/docs-contributors.md
@@ -4,14 +4,14 @@ title: Docs Contributors
<Intro>
-React documentation is written and maintained by the [React team](/community/team) and [external contributors.](https://github.com/reactjs/reactjs.org/graphs/contributors) On this page, we'd like to thank a few people who've made significant contributions to this site.
+React documentation is written and maintained by the [React team](/community/team) and [external contributors.](https://github.com/reactjs/react.dev/graphs/contributors) On this page, we'd like to thank a few people who've made significant contributions to this site.
</Intro>
## Content {/*content*/}
* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating
-* [Dan Abramov](https://twitter.com/dan_abramov): writing, curriculum design
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): writing, curriculum design
* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code
* [Rick Hanlon](https://twitter.com/rickhanlonii): writing
* [David McCabe](https://twitter.com/mcc_abe): writing
@@ -34,7 +34,7 @@ React documentation is written and maintained by the [React team](/community/tea
* [Jared Palmer](https://twitter.com/jaredpalmer): site development
* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development
* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration
-* [Dan Abramov](https://twitter.com/dan_abramov): site development
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): site development
* [Rick Hanlon](https://twitter.com/rickhanlonii): site development
* [Harish Kumar](https://www.strek.in/): development and maintenance
* [Luna Ruan](https://twitter.com/lunaruan): sandbox improvements
diff --git a/src/content/community/index.md b/src/content/community/index.md
index 1e28a27f0..cf8f9323b 100644
--- a/src/content/community/index.md
+++ b/src/content/community/index.md
@@ -29,4 +29,4 @@ Each community consists of many thousands of React users.
## News {/*news*/}
-For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website.
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index a12a5349c..78d48093a 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -30,53 +30,41 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Belo Horizonte](https://www.meetup.com/reactbh/)
* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
* [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/)
-* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/)
* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
-* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
-* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/)
-* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
-* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
-* [Salvador](https://www.meetup.com/pt-BR/ReactSSA)
* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
-* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/)
## Bolivia {/*bolivia*/}
* [Bolivia](https://www.meetup.com/ReactBolivia/)
## Canada {/*canada*/}
* [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
* [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
-## Chile {/*chile*/}
-* [Santiago](https://www.meetup.com/es-ES/react-santiago/)
-
-## China {/*china*/}
-* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
-
## Colombia {/*colombia*/}
-* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/)
* [Medellin](https://www.meetup.com/React-Medellin/)
-* [Cali](https://www.meetup.com/reactcali/)
+
+## Czechia {/*czechia*/}
+* [Prague](https://guild.host/react-prague/)
## Denmark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
-## Egypt {/*egypt*/}
-* [Cairo](https://www.meetup.com/react-cairo/)
-
## England (UK) {/*england-uk*/}
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
* [React Native London](https://guild.host/RNLDN)
+## Finland {/*finland*/}
+* [Helsinki](https://www.meetabit.com/communities/react-helsinki)
+
## France {/*france*/}
-* [Nantes](https://www.meetup.com/React-Nantes/)
* [Lille](https://www.meetup.com/ReactBeerLille/)
* [Paris](https://www.meetup.com/ReactJS-Paris/)
@@ -93,17 +81,15 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
-## Hungary {/*hungary*/}
-* [Budapest](https://www.meetup.com/React-Budapest/)
-
## India {/*india*/}
-* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
+* [Ahmedabad](https://reactahmedabad.dev/)
* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
-* [Chennai](https://www.meetup.com/React-Chennai/)
+* [Chennai](https://www.linkedin.com/company/chennaireact)
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
* [Mumbai](https://reactmumbai.dev)
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
## Indonesia {/*indonesia*/}
* [Indonesia](https://www.meetup.com/reactindonesia/)
@@ -117,6 +103,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Italy {/*italy*/}
* [Milan](https://www.meetup.com/React-JS-Milano/)
+## Japan {/*japan*/}
+* [Osaka](https://react-osaka.connpass.com/)
+
## Kenya {/*kenya*/}
* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
@@ -138,12 +127,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Karachi](https://www.facebook.com/groups/902678696597634/)
* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)
-## Panama {/*panama*/}
-* [Panama](https://www.meetup.com/React-Panama/)
-
-## Peru {/*peru*/}
-* [Lima](https://www.meetup.com/ReactJS-Peru/)
-
## Philippines {/*philippines*/}
* [Manila](https://www.meetup.com/reactjs-developers-manila/)
* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
@@ -156,11 +139,13 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
## Scotland (UK) {/*scotland-uk*/}
-* [Edinburgh](https://www.meetup.com/React-Scotland/)
+* [Edinburgh](https://www.meetup.com/react-edinburgh/)
## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
-* [Canarias](https://www.meetup.com/React-Canarias/)
+
+## Sri Lanka {/*sri-lanka*/}
+* [Colombo](https://www.javascriptcolombo.com/)
## Sweden {/*sweden*/}
* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
@@ -176,7 +161,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
## US {/*us*/}
-* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
@@ -187,7 +171,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
-* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
+* [Denver, CO - React Denver](https://reactdenver.com/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
@@ -197,27 +181,19 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
-* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
* [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
* [New York, NY - React.NYC](https://guild.host/react-nyc)
-* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
* [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
-* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
* [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
-* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/)
-* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
* [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
-* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
* [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/)
* [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
* [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
* [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
-* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)
* [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
-* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
* [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/)
* [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
* [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 0c6c63a8b..da4ce0791 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -18,63 +18,71 @@ Current members of the React team are listed in alphabetical order below.
Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
</TeamMember>
-<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" threads="alunyov" title="Engineer at Meta">
- Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports.
-</TeamMember>
-
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Independent Engineer">
Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
</TeamMember>
-<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
+<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
</TeamMember>
+<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel">
+ Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop.
+</TeamMember>
+
+<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
+ Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
+</TeamMember>
+
<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta">
- Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work.
+ Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX.
</TeamMember>
<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Engineer at Meta">
Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family.
</TeamMember>
-<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" twitter="joshcstory" title="Engineer at Vercel">
- Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+<TeamMember name="Jordan Brown" permalink="jordan-brown" photo="/images/team/jordan.jpg" github="jbrown215" title="Engineer at Meta">
+ Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar.
</TeamMember>
-<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" personal="no.lol" title="Engineer at Meta">
- Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
+<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel">
+ Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
</TeamMember>
-<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Engineer at Meta">
- Luna first learnt the fundamentals of python at the age of 6 from her father. Since then, she has been unstoppable. Luna aspires to be a gen z, and the road to success is paved with environmental advocacy, urban gardening and lots of quality time with her Voo-Doo’d (as pictured).
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
+ Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
</TeamMember>
<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate at Meta">
Matt stumbled into coding, and since then, has become enamored with creating things in communities that can’t be created alone. Prior to React, he worked on YouTube, the Google Assistant, Fuchsia, and Google Cloud AI and Evernote. When he's not trying to make better developer tools he enjoys the mountains, jazz, and spending time with his family.
</TeamMember>
+<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta">
+ Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest.
+</TeamMember>
+
<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta">
Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
</TeamMember>
-<TeamMember name="Noah Lemen" permalink="noah-lemen" photo="/images/team/noahlemen.jpg" github="noahlemen" twitter="noahlemen" threads="noahlemen" personal="noahle.men" title="Engineer at Meta">
- Noah’s interest in UI programming sparked during his education in music technology at NYU. At Meta, he's worked on internal tools, browsers, web performance, and is currently focused on React. Outside of work, Noah can be found tinkering with synthesizers or spending time with his cat.
+<TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta">
+ Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains.
</TeamMember>
-<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" personal="rickhanlon.codes" title="Engineer at Meta">
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta">
Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
</TeamMember>
-<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Engineer at Meta">
- Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
+<TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta">
+ Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes.
</TeamMember>
<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel">
Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
</TeamMember>
-<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Independent Engineer">
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel">
Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
</TeamMember>
@@ -86,10 +94,6 @@ Current members of the React team are listed in alphabetical order below.
Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”.
</TeamMember>
-<TeamMember name="Tianyu Yao" permalink="tianyu-yao" photo="/images/team/tianyu.jpg" github="tyao1" twitter="tianyu0" title="Engineer at Meta">
- Tianyu’s interest in computers started as a kid because he loves video games. So he majored in computer science and still plays childish games like League of Legends. When he is not in front of a computer, he enjoys playing with his two kittens, hiking and kayaking.
-</TeamMember>
-
<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta">
Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
</TeamMember>
diff --git a/src/content/community/translations.md b/src/content/community/translations.md
new file mode 100644
index 000000000..4c07e6a1e
--- /dev/null
+++ b/src/content/community/translations.md
@@ -0,0 +1,35 @@
+---
+title: Translations
+---
+
+<Intro>
+
+React docs are translated by the global community into many languages all over the world.
+
+</Intro>
+
+## Source site {/*main-site*/}
+
+All translations are provided from the canonical source docs:
+
+- [English](https://react.dev/) — [Contribute](https://github.com/reactjs/react.dev/)
+
+## Full translations {/*full-translations*/}
+
+{/* If you are a language maintainer and want to add your language here, finish the "Core" translations and edit `deployedTranslations` under `src/utils`. */}
+
+<LanguageList progress="complete" />
+
+## In-progress translations {/*in-progress-translations*/}
+
+For the progress of each translation, see: [Is React Translated Yet?](https://translations.react.dev/)
+
+<LanguageList progress="in-progress" />
+
+## How to contribute {/*how-to-contribute*/}
+
+You can contribute to the translation efforts!
+
+The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort.
+
+If you want to start a new translation for your language, visit: [translations.react.dev](https://github.com/reactjs/translations.react.dev)
\ No newline at end of file
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
index fad926c57..a61d19942 100644
--- a/src/content/community/versioning-policy.md
+++ b/src/content/community/versioning-policy.md
@@ -8,6 +8,8 @@ All stable builds of React go through a high level of testing and follow semanti
</Intro>
+This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page.
+
## Stable releases {/*stable-releases*/}
Stable React releases (also known as "Latest" release channel) follow [semantic versioning (semver)](https://semver.org/) principles.
@@ -22,7 +24,9 @@ Major releases can also contain new features, and any release can include bug fi
Minor releases are the most common type of release.
-### Breaking Changes {/*breaking-changes*/}
+We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability.
+
+### Breaking changes {/*breaking-changes*/}
Breaking changes are inconvenient for everyone, so we try to minimize the number of major releases – for example, React 15 was released in April 2016 and React 16 was released in September 2017, and React 17 was released in October 2020.
diff --git a/src/content/community/videos.md b/src/content/community/videos.md
index 3fad95786..1fca60307 100644
--- a/src/content/community/videos.md
+++ b/src/content/community/videos.md
@@ -8,6 +8,75 @@ Videos dedicated to the discussion of React and the React ecosystem.
</Intro>
+## React Conf 2024 {/*react-conf-2024*/}
+
+At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference:
+
+<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=975s" title="Boz and Seth Intro" />
+
+### React 19 Keynote {/*react-19-keynote*/}
+
+In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei):
+
+
+<YouTubeIframe src="https://www.youtube.com/embed/lyEKhv8-3n0" title="YouTube video player" />
+
+### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/}
+
+React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk:
+
+<YouTubeIframe src="https://www.youtube.com/embed/R0B2HsSM78s" title="React Unpacked: A Roadmap to React 19" />
+
+### What's New in React 19 {/*whats-new-in-react-19*/}
+
+[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features:
+
+<YouTubeIframe src="https://www.youtube.com/embed/AJOGzVygGcY" title="What's New in React 19" />
+
+### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/}
+
+[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19:
+
+<YouTubeIframe src="https://www.youtube.com/embed/IBBN-s77YSI" title="React 19 Deep Dive: Coordinating HTML" />
+
+### React for Two Computers {/*react-for-two-computers*/}
+
+[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first:
+
+<YouTubeIframe src="https://www.youtube.com/embed/ozI4V_29fj4" title="React for Two Computers" />
+
+### Forget About Memo {/*forget-about-memo*/}
+
+[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice:
+
+<YouTubeIframe src="https://www.youtube.com/embed/lvhPq5chokM" title="Forget About Memo" />
+
+### React Compiler Deep Dive {/*react-compiler-deep-dive*/}
+
+[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works:
+
+<YouTubeIframe src="https://www.youtube.com/embed/uA_PVyZP7AI" title="React Compiler Deep Dive" />
+
+### And more... {/*and-more-2024*/}
+
+**We also heard talks from the community on Server Components:**
+* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone)
+
+**Talks from React frameworks using new features:**
+
+* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence)
+* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob)
+* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme)
+* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix)
+
+**And Q&As with the React and React Native teams:**
+- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
+- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+
+You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks).
+
## React Conf 2021 {/*react-conf-2021*/}
### React 18 Keynote {/*react-18-keynote*/}
@@ -16,13 +85,13 @@ In the keynote, we shared our vision for the future of React starting with React
Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here:
-<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="React 18 Keynote" />
### React 18 for Application Developers {/*react-18-for-application-developers*/}
For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here:
-<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="React 18 for Application Developers" />
### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/}
@@ -32,7 +101,7 @@ Streaming server rendering lets you generate HTML from React components on the s
For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here:
-<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Streaming Server Rendering with Suspense" />
### The first React working group {/*the-first-react-working-group*/}
@@ -40,7 +109,7 @@ For React 18, we created our first Working Group to collaborate with a panel of
For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk:
-<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="The first React working group" />
### React Developer Tooling {/*react-developer-tooling*/}
@@ -48,19 +117,19 @@ To support the new features in this release, we also announced the newly formed
For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk:
-<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="React Developer Tooling" />
### React without memo {/*react-without-memo*/}
Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:
-<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="React without memo" />
### React docs keynote {/*react-docs-keynote*/}
[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)):
-<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="React docs keynote" />
### And more... {/*and-more*/}
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index f494b0ab1..2848fc072 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -1,68 +1,69 @@
---
-title: Add React to an Existing Project
+title: اضافه کردن ریاکت به یک پروژه موجود
---
<Intro>
-If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
+اگر میخواهید کمی تعاملپذیری به پروژه موجود خود اضافه کنید، نیازی نیست آن را از ابتدا با ریاکت بازنویسی کنید. ریاکت را به پشته فعلی خود اضافه کنید و کامپوننتهای تعاملی ریاکت را در هر جایی رندر کنید.
</Intro>
<Note>
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
+**برای توسعه محلی لازم است [Node.js](https://nodejs.org/en/) را نصب کنید.** هرچند میتوانید [ریاکت را امتحان کنید](/learn/installation#try-react) به صورت آنلاین یا با یک صفحه HTML ساده، اما در عمل بیشتر ابزارهای جاوااسکریپت که برای توسعه نیاز خواهید داشت، به Node.js وابسته هستند.
</Note>
-## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
+## استفاده از ریاکت برای یک زیرمسیر کامل در وبسایت موجود {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
-Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React.
+فرض کنید یک اپلیکیشن وب موجود در `example.com` دارید که با یک فناوری سمت سرور دیگر (مثل Rails) ساخته شده است و میخواهید تمام مسیرهایی که با `example.com/some-app/` شروع میشوند، به طور کامل با ریاکت پیادهسازی شوند.
-Here's how we recommend to set it up:
+پیشنهاد ما برای راهاندازی به این صورت است:
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
-3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
+1. **بخش ریاکت اپلیکیشن خود را بسازید** با استفاده از یکی از [فریمورکهای مبتنی بر ریاکت](/learn/start-a-new-react-project).
+2. **`/some-app` را بهعنوان *مسیر پایه*** در پیکربندی فریمورک خود مشخص کنید (راهنما: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)، [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+3. **سرور یا پروکسی خود را پیکربندی کنید** تا همه درخواستهای زیر مسیر `/some-app/` توسط اپلیکیشن ریاکت شما مدیریت شوند.
-This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
+این کار باعث میشود بخش React اپلیکیشن شما بتواند از [بهترین شیوهها](/learn/build-a-react-app-from-scratch#consider-using-a-framework) که در این فریمورکها تعبیه شدهاند، بهرهمند شود.
-Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
+بسیاری از فریمورکهای مبتنی بر ریاکت فولاستک هستند و به اپلیکیشن ریاکت شما اجازه میدهند از قابلیتهای سرور استفاده کند. با این حال، حتی اگر نتوانید یا نخواهید جاوااسکریپت را روی سرور اجرا کنید، میتوانید از همان رویکرد استفاده کنید. در این حالت، خروجی HTML/CSS/JS را (خروجی [`next export`](https://nextjs.org/docs/advanced-features/static-html-export) در Next.js یا حالت پیشفرض در Gatsby) در مسیر `/some-app/` سرو کنید.
-## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/}
+## استفاده از ریاکت برای بخشی از یک صفحه موجود {/*using-react-for-a-part-of-your-existing-page*/}
-Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
+فرض کنید یک صفحه موجود دارید که با یک فناوری دیگر ساخته شده است (چه سمت سرور مثل Rails، چه سمت کلاینت مثل Backbone) و میخواهید کامپوننتهای تعاملی ریاکت را در جایی از آن صفحه رندر کنید. این یکی از روشهای رایج برای یکپارچهسازی ریاکت است—در واقع، برای بسیاری از سالها در Meta بیشتر استفادههای ریاکت به همین شکل بوده است!
-You can do this in two steps:
+میتوانید این کار را در دو گام انجام دهید:
-1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry.
-2. **Render your React components** where you want to see them on the page.
+1. **یک محیط جاوااسکریپت راهاندازی کنید** که به شما اجازه دهد از [سینتکس JSX](/learn/writing-markup-with-jsx) استفاده کنید، کد خود را با سینتکس [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) به ماژولها تقسیم کنید، و از پکیجها (برای مثال React) در رجیستری [npm](https://www.npmjs.com/) استفاده کنید.
+2. **کامپوننتهای ریاکت خود را رندر کنید** در جایی که میخواهید آنها را در صفحه ببینید.
-The exact approach depends on your existing page setup, so let's walk through some details.
+روش دقیق این کار به تنظیمات موجود صفحه شما بستگی دارد، پس بیایید جزئیات آن را مرور کنیم.
-### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/}
+### گام ۱: راهاندازی یک محیط ماژولار جاوااسکریپت {/*step-1-set-up-a-modular-javascript-environment*/}
-A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
+یک محیط جاوااسکریپت ماژولار به شما اجازه میدهد کامپوننتهای ریاکت خود را در فایلهای جداگانه بنویسید، به جای اینکه همهی کدهایتان را در یک فایل قرار دهید. همچنین این محیط به شما امکان استفاده از همهی پکیجهای مفیدی که توسعهدهندگان دیگر در رجیستری [npm](https://www.npmjs.com/) منتشر کردهاند—از جمله خود React—را میدهد! اینکه چطور این کار را انجام دهید، به تنظیمات فعلی پروژه شما بستگی دارد:
-* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `<div />` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX.
+* **اگر اپلیکیشن شما از قبل به فایلهایی تقسیم شده است که از دستور `import` استفاده میکنند،** سعی کنید از همان تنظیمات موجود استفاده کنید. بررسی کنید که نوشتن `<div />` در کد JS شما خطای سینتکسی ایجاد میکند یا نه. اگر خطای سینتکسی ایجاد شد، ممکن است نیاز داشته باشید [کد جاوااسکریپت خود را با Babel تبدیل کنید](https://babeljs.io/setup)، و [پریست React در Babel](https://babeljs.io/docs/babel-preset-react) را فعال کنید تا بتوانید از JSX استفاده کنید.
-* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+* **اگر اپلیکیشن شما هیچ تنظیماتی برای کامپایل ماژولهای جاوااسکریپت ندارد،** آن را با [Vite](https://vite.dev/) راهاندازی کنید. جامعه Vite [یکپارچهسازیهای زیادی با فریمورکهای بکاند](https://github.com/vitejs/awesome-vite#integrations-with-backends) از جمله Rails، Django و Laravel دارد. اگر فریمورک بکاند شما در لیست نبود، [این راهنما](https://vite.dev/guide/backend-integration.html) را دنبال کنید تا Vite را به صورت دستی با بکاند خود یکپارچه کنید.
-To check whether your setup works, run this command in your project folder:
+برای بررسی اینکه آیا تنظیمات شما درست کار میکند، این دستور را در پوشه پروژه خود اجرا کنید:
<TerminalBlock>
npm install react react-dom
</TerminalBlock>
-Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`):
+سپس این خطوط کد را در بالای فایل اصلی جاوااسکریپت خود اضافه کنید (ممکن است نام آن `index.js` یا `main.js` باشد):
<Sandpack>
-```html index.html hidden
+```html public/index.html hidden
<!DOCTYPE html>
<html>
<head><title>My app
+
+ 
+