{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.
+
+
+
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..96417fd8b
--- /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).
+
+---
+
+<Intro>
+
+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.
+
+</Intro>
+
+---
+
+At React Conf 2024, we announced the [React 19 RC](/blog/2024/04/25/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/04/25/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://twitter.com/dan_abramov2)
+- [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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=973s" />
+
+## Day 2 {/*day-2*/}
+
+_[Watch the full day 2 stream here.](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=1720s)_
+
+To kick off day 2, [Seth Webster](https://twitter.com/sethwebster) shared a welcome message, followed by a Thank You from [Eli White](https://x.com/Eli_White) and an introduction by our Chief Vibes Officer [Ashley Narcisse](https://twitter.com/_darkfadr).
+
+In the day 2 keynote, [Nicola Corti](https://twitter.com/cortinico) shared the State of React Native, including 78 million downloads in 2023. He also highlighted apps using React Native including 2000+ screens used inside of Meta; the product details page in Facebook Marketplace, which is visited more than 2 billion times per day; and part of the Microsoft Windows Start Menu and some features in almost every Microsoft Office product across mobile and desktop.
+
+Nicola also highlighted all the work the community does to support React Native including libraries, frameworks, and multiple platforms. For more, check out these talks from the community:
+
+- [Extending React Native beyond Mobile and Desktop Apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=5798s) by [Chris Traganos](https://twitter.com/chris_trag) and [Anisha Malde](https://twitter.com/anisha_malde)
+- [Spatial computing with React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=22525s) by [MichaΕ PierzchaΕa](https://twitter.com/thymikee)
+
+[Riccardo Cipolleschi](https://twitter.com/cipolleschir) continued the day 2 keynote by announcing that the React Native New Architecture is now in Beta and ready for apps to adopt in production. He shared new features and improvements in the new architecture, and shared the roadmap for the future of React Native. For more check out:
+
+- [Cross Platform React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=26569s) by [Olga Zinoveva](https://github.com/SlyCaptainFlint) and [Naman Goel](https://twitter.com/naman34)
+
+Next in the keynote, Nicola announced that we are now recommending starting with a framework like Expo for all new apps created with React Native. With the change, he also announced a new React Native homepage and new Getting Started docs. You can view the new Getting Started guide in the [React Native docs](https://reactnative.dev/docs/next/environment-setup).
+
+Finally, to end the keynote, [Kadi Kraman](https://twitter.com/kadikraman) shared the latest features and improvements in Expo, and how to get started developing with React Native using Expo.
+
+Watch the full day 2 keynote here:
+
+<YouTubeIframe src="https://www.youtube.com/embed/0ckOUBiuxVY?t=1720s" />
+
+## Q&A {/*q-and-a*/}
+
+The React and React Native teams also ended each day with a Q&A session:
+
+- [React Q&A](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
+- [React Native Q&A](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+
+## And more... {/*and-more*/}
+
+We also heard talks on accessibility, error reporting, css, and more:
+
+- [Demystifying accessibility in React apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=20655s) by [Kateryna Porshnieva](https://twitter.com/krambertech)
+- [Pigment CSS, CSS in the server component age](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=21696s) by [Olivier Tassinari](https://twitter.com/olivtassinari)
+- [Real-time React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24070s) by [Sunil Pai](https://twitter.com/threepointone)
+- [Let's break React Rules](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=25862s) by [Charlotte Isambert](https://twitter.com/c_isambert)
+- [Solve 100% of your errors](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=19881s) by [Ryan Albrecht](https://github.com/ryan953)
+
+## Thank you {/*thank-you*/}
+
+Thank you to all the staff, speakers, and participants who made React Conf 2024 possible. There are too many to list, but we want to thank a few in particular.
+
+Thank you to [Barbara Markiewicz](https://twitter.com/barbara_markie), the team at [Callstack](https://www.callstack.com/), and our React Team Developer Advocate [Matt Carroll](https://twitter.com/mattcarrollcode) for helping to plan the entire event; and to [Sunny Leggett](https://zeroslopeevents.com/about) and everyone from [Zero Slope](https://zeroslopeevents.com) for helping to organize the event.
+
+Thank you [Ashley Narcisse](https://twitter.com/_darkfadr) for being our MC and Chief Vibes Officer; and to [Michael Chan](https://twitter.com/chantastic) and [Jamon Holmgren](https://twitter.com/jamonholmgren) for hosting the Q&A sessions.
+
+Thank you [Seth Webster](https://twitter.com/sethwebster) and [Eli White](https://x.com/Eli_White) for welcoming us each day and providing direction on structure and content; and to [Tom Occhino](https://twitter.com/tomocchino) for joining us with a special message during the after-party.
+
+Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) for providing detailed feedback on talks, working on slide designs, and generally filling in the gaps to sweat the details.
+
+Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app.
+
+Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), and [Vercel](https://vercel.com).
+
+Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us.
+
+Thank you to all the speakers who shared their knowledge and experiences with the community.
+
+Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together.
+
+See you next time!
+
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index fc8a2969b..4a1a165a3 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -10,6 +10,30 @@ This blog is the official source for the updates from the React team. Anything i
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
+<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 RC " date="April 25, 2024" url="/blog/2024/04/25/react-19">
+
+In the React 19 RC 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 19 RC 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 e6f6ccaf3..aeb0787ef 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -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,7 @@ 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)
+* [Kathryn Middleton](https://github.com/kmiddleton14)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
* [Mengdi Chen](https://github.com/mondaychen)
@@ -46,6 +48,7 @@ We'd like to recognize a few people who have made significant contributions to R
* [Philipp Spiess](https://github.com/philipp-spiess)
* [Rachel Nabors](https://github.com/rachelnabors)
* [Robert Zhang](https://github.com/robertzhidealx)
+* [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)
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 4b0954942..1cd31f855 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,31 +10,42 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
-September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
+### React Nexus 2024 {/*react-nexus-2024*/}
+July 04 & 05, 2024. Bangalore, India (In-person event)
-[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
+[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 Alicante 2023 {/*react-alicante-2023*/}
-September 28 - 30, 2023. Alicante, Spain
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
-[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
-### React Live 2023 {/*react-live-2023*/}
-September 29, 2023. Amsterdam, Netherlands
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
-[Website](https://reactlive.nl/)
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
-### React Native EU 2023 {/*react-native-eu-2023*/}
-September 7 & 8, 2023. WrocΕaw, Poland
+### React Rally 2024 π {/*react-rally-2024*/}
+August 12-13, 2024. Park City, UT, USA
-[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
-### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
-September 29 - 30, 2023. Nairobi, Kenya
+### 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 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)
+
+### 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)
+<<<<<<< HEAD
### React Native EU 2023 {/*react-native-eu-2023*/}
September 7 & 8, 2023. WrocΕaw, Poland
@@ -43,45 +54,129 @@ September 7 & 8, 2023. WrocΕaw, Poland
### React India 2023 {/*react-india-2023*/}
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+=======
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+>>>>>>> 6274d4faf5afcef74357871d06191558050e23d3
[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 Brussels 2023 {/*react-brussels-2023*/}
-October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
-[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
-### React Advanced 2023 {/*react-advanced-2023*/}
-October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
-[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
-### reactjsday 2023 {/*reactjsday-2023*/}
-October 27th 2023. In-person in Verona, Italy and online (hybrid event)
+## Past Conferences {/*past-conferences*/}
-[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+### React Summit 2024 {/*react-summit-2024*/}
+June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
-### React Summit US 2023 {/*react-summit-us-2023*/}
-November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
+[Website](https://reactsummit.com/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
-[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
+### React Norway 2024 {/*react-norway-2024*/}
+June 14, 2024. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
-### React Day Berlin 2023 {/*react-day-berlin-2023*/}
-December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
-[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
+### 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#/)
+
+### Frontend Nation 2024 {/*frontend-nation-2024*/}
+June 4 - 7, 2024. Online
+
+[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
### App.js Conf 2024 {/*appjs-conf-2024*/}
May 22 - 24, 2024. In-person in KrakΓ³w, Poland + remote
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-### Render(ATL) 2024 π {/*renderatl-2024-*/}
-June 12 - June 14, 2024. Atlanta, GA, USA
+### React Conf 2024 {/*react-conf-2024*/}
+May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
-[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#/)
+[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)
+
+[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
+
+### React Summit US 2023 {/*react-summit-us-2023*/}
+November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
+
+### reactjsday 2023 {/*reactjsday-2023*/}
+October 27th 2023. In-person in Verona, Italy and online (hybrid event)
+
+[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Advanced 2023 {/*react-advanced-2023*/}
+October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
+
+[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+
+### React Brussels 2023 {/*react-brussels-2023*/}
+October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC)
+
+### React India 2023 {/*react-india-2023*/}
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://x.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
+September 29 - 30, 2023. 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 Live 2023 {/*react-live-2023*/}
+September 29, 2023. Amsterdam, Netherlands
+
+[Website](https://reactlive.nl/)
+
+### React Alicante 2023 {/*react-alicante-2023*/}
+September 28 - 30, 2023. Alicante, Spain
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
+
+### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
+September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
+
+[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
+
+### React Native EU 2023 {/*react-native-eu-2023*/}
+September 7 & 8, 2023. WrocΕaw, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
### React Rally 2023 π {/*react-rally-2023*/}
August 17 & 18, 2023. Salt Lake City, UT, USA
diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md
index cbdbf7d7f..0f9d002d6 100644
--- a/src/content/community/docs-contributors.md
+++ b/src/content/community/docs-contributors.md
@@ -4,7 +4,7 @@ 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>
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 644bbcee3..d8887c3de 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -72,7 +72,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## 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 London : Bring Your Own Project](https://www.meetup.com/React-London-Bring-Your-Own-Project/)
+* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native London](https://guild.host/RNLDN)
## France {/*france*/}
* [Nantes](https://www.meetup.com/React-Nantes/)
@@ -86,7 +87,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Karlsruhe](https://www.meetup.com/react_ka/)
* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
* [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
-* [React Berlin](https://www.meetup.com/React-Open-Source/)
+* [React Berlin](https://guild.host/react-berlin)
## Greece {/*greece*/}
* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
@@ -99,15 +100,16 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
* [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/)
## Indonesia {/*indonesia*/}
* [Indonesia](https://www.meetup.com/reactindonesia/)
## Ireland {/*ireland*/}
-* [Dublin](https://www.meetup.com/ReactJS-Dublin/)
+* [Dublin](https://guild.host/reactjs-dublin)
## Israel {/*israel*/}
* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
@@ -123,7 +125,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Penang](https://www.facebook.com/groups/reactpenang/)
## Netherlands {/*netherlands*/}
-* [Amsterdam](https://www.meetup.com/React-Amsterdam/)
+* [Amsterdam](https://guild.host/react-amsterdam)
## New Zealand {/*new-zealand*/}
* [Wellington](https://www.meetup.com/React-Wellington/)
@@ -200,6 +202,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [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/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 86783b893..6004476e2 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -14,27 +14,27 @@ The React Core team members work full time on the core component APIs, the engin
Current members of the React team are listed in alphabetical order below.
-<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Vercel">
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" threads="acdlite" title="Engineer at Vercel">
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" 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" twitter="dan_abramov2" 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" title="Engineering Manager at Meta">
+<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">
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="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" 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.
+<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 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" title="Engineer at Meta">
+<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>
@@ -42,51 +42,51 @@ Current members of the React team are listed in alphabetical order below.
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="Kathryn Middleton" permalink="kathryn-middleton" photo="/images/team/kathryn-middleton.jpg" github="kmiddleton14" twitter="kmiddleton14" title="Engineering Manager at Meta">
- Kathryn initially discovered web development when she wanted to make her myspace page look cool. She ended up majoring in Computer Science, and quickly became a huge fan of React building features on the Instagram.com team. Outside of work she loves playing pingpong, teaching spin classes, and going plant shopping.
+<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. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda.
</TeamMember>
-<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="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="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>
-<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="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>
-
-<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" title="Developer Advocate at Meta">
+<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="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
+<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="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" personal="rickhanlon.codes" title="Engineer at Meta">
+<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>
+
+<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">
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="Samuel Susla" permalink="samuel-susla" photo="/images/team/sam.jpg" github="sammy-SC" twitter="SamuelSusla" title="Engineer at Meta">
- Samuelβs interest in programming started with the movie Matrix. He still has Matrix screen saver. Before working on React, he was focused on writing iOS apps. Outside of work, Samuel enjoys playing beach volleyball, squash, badminton and spending time with his family.
+<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="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" title="Engineer at Meta">
+<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>
-<TeamMember name="Sebastian MarkbΓ₯ge" permalink="sebastian-markbΓ₯ge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
+<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" 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>
-<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
+<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" threads="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
</TeamMember>
-<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" personal="sophiebits.com" title="Independent Engineer">
+<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" threads="sophiebits" personal="sophiebits.com" title="Independent Engineer">
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>
@@ -94,7 +94,7 @@ Current members of the React team are listed in alphabetical order below.
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" title="Engineering Manager at Meta">
+<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 eb38f8c29..7aa71efd2 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>
+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.
@@ -80,7 +82,7 @@ This section will be most relevant to developers who work on frameworks, librari
Each of React's release channels is designed for a distinct use case:
- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **User-facing applications that consume React directly use this channel.**
-- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also Canaries for integration testing between React and third party projects.**
+- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also use Canaries for integration testing between React and third party projects.**
- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Canary and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503` for Canary and `0.0.0-experimental-388686f29-20230503` for Experimental.
diff --git a/src/content/errors/377.md b/src/content/errors/377.md
new file mode 100644
index 000000000..6269e9d06
--- /dev/null
+++ b/src/content/errors/377.md
@@ -0,0 +1,13 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
+
+The full text of the error you just encountered is:
+
+<ErrorDecoder />
+
+This error occurs when you pass a BigInt value from a Server Component to a Client Component.
diff --git a/src/content/errors/generic.md b/src/content/errors/generic.md
new file mode 100644
index 000000000..27c3ca52d
--- /dev/null
+++ b/src/content/errors/generic.md
@@ -0,0 +1,11 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
+
+The full text of the error you just encountered is:
+
+<ErrorDecoder />
diff --git a/src/content/errors/index.md b/src/content/errors/index.md
new file mode 100644
index 000000000..25746d25d
--- /dev/null
+++ b/src/content/errors/index.md
@@ -0,0 +1,10 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error.
+
+For an example, see: [https://react.dev/errors/149](/errors/421).
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 03f491211..f494b0ab1 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -67,7 +67,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b
</html>
```
-```js index.js active
+```js src/index.js active
import { createRoot } from 'react-dom/client';
// Clear the existing HTML content
@@ -131,7 +131,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de
</html>
```
-```js index.js active
+```js src/index.js active
import { createRoot } from 'react-dom/client';
function NavigationBar() {
diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 501c9f620..5c87a3e79 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -134,7 +134,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -265,7 +265,7 @@ setCount(count + 1); // Request a re-render with 1
console.log(count); // Still 0!
```
-This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
<Sandpack>
@@ -646,7 +646,6 @@ Arrays are another type of mutable JavaScript objects you can store in state and
```js
import { useState } from 'react';
-let nextId = 3;
const initialList = [
{ id: 0, title: 'Big Bellies', seen: false },
{ id: 1, title: 'Lunar Landscape', seen: false },
@@ -714,7 +713,6 @@ If copying arrays in code gets tedious, you can use a library like [Immer](https
import { useState } from 'react';
import { useImmer } from 'use-immer';
-let nextId = 3;
const initialList = [
{ id: 0, title: 'Big Bellies', seen: false },
{ id: 1, title: 'Lunar Landscape', seen: false },
diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index 49e11a22f..5be2b4d34 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -554,8 +554,6 @@ button { margin-top: 10px; }
</Sandpack>
-(Alternatively, you may hold the selected index in state.)
-
The state used to be duplicated like this:
* `items = [{ id: 0, title: 'pretzels'}, ...]`
@@ -612,7 +610,7 @@ export default function TravelPlan() {
}
```
-```js places.js active
+```js src/places.js active
export const initialTravelPlan = {
id: 0,
title: '(Root)',
@@ -868,7 +866,7 @@ export default function TravelPlan() {
}
```
-```js places.js active
+```js src/places.js active
export const initialTravelPlan = {
0: {
id: 0,
@@ -1204,7 +1202,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
}
```
-```js places.js
+```js src/places.js
export const initialTravelPlan = {
0: {
id: 0,
@@ -1543,7 +1541,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
}
```
-```js places.js
+```js src/places.js
export const initialTravelPlan = {
0: {
id: 0,
@@ -1841,7 +1839,7 @@ This `Clock` component receives two props: `color` and `time`. When you select a
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
import { useState } from 'react';
export default function Clock(props) {
@@ -1854,7 +1852,7 @@ export default function Clock(props) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -1896,7 +1894,7 @@ The issue is that this component has `color` state initialized with the initial
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
import { useState } from 'react';
export default function Clock(props) {
@@ -1908,7 +1906,7 @@ export default function Clock(props) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -1948,7 +1946,7 @@ Or, using the destructuring syntax:
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
import { useState } from 'react';
export default function Clock({ color, time }) {
@@ -1960,7 +1958,7 @@ export default function Clock({ color, time }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -2010,7 +2008,7 @@ Is any state in this example redundant?
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import AddItem from './AddItem.js';
import PackingList from './PackingList.js';
@@ -2078,7 +2076,7 @@ export default function TravelPlan() {
}
```
-```js AddItem.js hidden
+```js src/AddItem.js hidden
import { useState } from 'react';
export default function AddItem({ onAddItem }) {
@@ -2099,7 +2097,7 @@ export default function AddItem({ onAddItem }) {
}
```
-```js PackingList.js hidden
+```js src/PackingList.js hidden
import { useState } from 'react';
export default function PackingList({
@@ -2149,7 +2147,7 @@ Although you could carefully change each event handler to update the `total` and
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import AddItem from './AddItem.js';
import PackingList from './PackingList.js';
@@ -2213,7 +2211,7 @@ export default function TravelPlan() {
}
```
-```js AddItem.js hidden
+```js src/AddItem.js hidden
import { useState } from 'react';
export default function AddItem({ onAddItem }) {
@@ -2234,7 +2232,7 @@ export default function AddItem({ onAddItem }) {
}
```
-```js PackingList.js hidden
+```js src/PackingList.js hidden
import { useState } from 'react';
export default function PackingList({
@@ -2290,7 +2288,7 @@ This code works, but there is a minor UI glitch. When you press "Star" or "Unsta
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { initialLetters } from './data.js';
import Letter from './Letter.js';
@@ -2337,7 +2335,7 @@ export default function MailClient() {
}
```
-```js Letter.js
+```js src/Letter.js
export default function Letter({
letter,
isHighlighted,
@@ -2367,7 +2365,7 @@ export default function Letter({
}
```
-```js data.js
+```js src/data.js
export const initialLetters = [{
id: 0,
subject: 'Ready for adventure?',
@@ -2399,7 +2397,7 @@ To fix the issue, remove the duplication from state. Instead of storing *the let
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { initialLetters } from './data.js';
import Letter from './Letter.js';
@@ -2446,7 +2444,7 @@ export default function MailClient() {
}
```
-```js Letter.js
+```js src/Letter.js
export default function Letter({
letter,
isHighlighted,
@@ -2476,7 +2474,7 @@ export default function Letter({
}
```
-```js data.js
+```js src/data.js
export const initialLetters = [{
id: 0,
subject: 'Ready for adventure?',
@@ -2516,7 +2514,7 @@ Instead of a single selected ID, you might want to hold an array or a [Set](http
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { letters } from './data.js';
import Letter from './Letter.js';
@@ -2559,7 +2557,7 @@ export default function MailClient() {
}
```
-```js Letter.js
+```js src/Letter.js
export default function Letter({
letter,
onToggle,
@@ -2584,7 +2582,7 @@ export default function Letter({
}
```
-```js data.js
+```js src/data.js
export const letters = [{
id: 0,
subject: 'Ready for adventure?',
@@ -2615,7 +2613,7 @@ Instead of a single `selectedId`, keep a `selectedIds` *array* in state. For exa
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { letters } from './data.js';
import Letter from './Letter.js';
@@ -2667,7 +2665,7 @@ export default function MailClient() {
}
```
-```js Letter.js
+```js src/Letter.js
export default function Letter({
letter,
onToggle,
@@ -2692,7 +2690,7 @@ export default function Letter({
}
```
-```js data.js
+```js src/data.js
export const letters = [{
id: 0,
subject: 'Ready for adventure?',
@@ -2723,7 +2721,7 @@ To fix this, you can hold a [Set](https://developer.mozilla.org/en-US/docs/Web/J
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { letters } from './data.js';
import Letter from './Letter.js';
@@ -2772,7 +2770,7 @@ export default function MailClient() {
}
```
-```js Letter.js
+```js src/Letter.js
export default function Letter({
letter,
onToggle,
@@ -2797,7 +2795,7 @@ export default function Letter({
}
```
-```js data.js
+```js src/data.js
export const letters = [{
id: 0,
subject: 'Ready for adventure?',
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 167fe5b70..ce49b85c8 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -69,7 +69,7 @@ You can declare many components in one file, but large files can get difficult t
<Sandpack>
-```js App.js hidden
+```js src/App.js hidden
import Gallery from './Gallery.js';
export default function App() {
@@ -79,7 +79,7 @@ export default function App() {
}
```
-```js Gallery.js active
+```js src/Gallery.js active
import Profile from './Profile.js';
export default function Gallery() {
@@ -94,7 +94,7 @@ export default function Gallery() {
}
```
-```js Profile.js
+```js src/Profile.js
export default function Profile() {
return (
<img
@@ -279,7 +279,7 @@ function Card({ children }) {
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -371,7 +371,7 @@ For each array item, you will need to specify a `key`. Usually, you will want to
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -398,7 +398,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -432,7 +432,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md
index 94dbbbaef..7ad7ee276 100644
--- a/src/content/learn/editor-setup.md
+++ b/src/content/learn/editor-setup.md
@@ -40,7 +40,7 @@ Code linters find problems in your code as you write, helping you fix them early
### Formatting {/*formatting*/}
-The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spacesβand your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spacesβand your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md
index 69e733521..23f11f54e 100644
--- a/src/content/learn/escape-hatches.md
+++ b/src/content/learn/escape-hatches.md
@@ -163,7 +163,7 @@ export default function ChatRoom() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection() {
// A real implementation would actually connect to the server
return {
@@ -281,7 +281,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -395,7 +395,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -424,7 +424,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -528,7 +528,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -557,7 +557,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js hidden
+```js src/notifications.js hidden
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -647,7 +647,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
return {
@@ -721,7 +721,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
return {
@@ -797,7 +797,7 @@ function Dot({ position, opacity }) {
}
```
-```js usePointerPosition.js
+```js src/usePointerPosition.js
import { useState, useEffect } from 'react';
export function usePointerPosition() {
@@ -813,7 +813,7 @@ export function usePointerPosition() {
}
```
-```js useDelayedValue.js
+```js src/useDelayedValue.js
import { useState, useEffect } from 'react';
export function useDelayedValue(value, delay) {
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 012a5c3f9..5c08c0123 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -23,7 +23,7 @@ As your components grow in complexity, it can get harder to see at a glance all
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -79,7 +79,7 @@ const initialTasks = [
];
```
-```js AddTask.js hidden
+```js src/AddTask.js hidden
import { useState } from 'react';
export default function AddTask({onAddTask}) {
@@ -103,7 +103,7 @@ export default function AddTask({onAddTask}) {
}
```
-```js TaskList.js hidden
+```js src/TaskList.js hidden
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -398,7 +398,7 @@ You could even use the `reduce()` method with an `initialState` and an array of
<Sandpack>
-```js index.js active
+```js src/index.js active
import tasksReducer from './tasksReducer.js';
let initialState = [];
@@ -415,7 +415,7 @@ const output = document.getElementById('output');
output.textContent = JSON.stringify(finalState, null, 2);
```
-```js tasksReducer.js
+```js src/tasksReducer.js
export default function tasksReducer(tasks, action) {
switch (action.type) {
case 'added': {
@@ -493,7 +493,7 @@ Now it's fully wired up! Here, the reducer is declared at the bottom of the comp
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -574,7 +574,7 @@ const initialTasks = [
];
```
-```js AddTask.js hidden
+```js src/AddTask.js hidden
import { useState } from 'react';
export default function AddTask({onAddTask}) {
@@ -598,7 +598,7 @@ export default function AddTask({onAddTask}) {
}
```
-```js TaskList.js hidden
+```js src/TaskList.js hidden
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -678,7 +678,7 @@ If you want, you can even move the reducer to a different file:
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -730,7 +730,7 @@ const initialTasks = [
];
```
-```js tasksReducer.js
+```js src/tasksReducer.js
export default function tasksReducer(tasks, action) {
switch (action.type) {
case 'added': {
@@ -762,7 +762,7 @@ export default function tasksReducer(tasks, action) {
}
```
-```js AddTask.js hidden
+```js src/AddTask.js hidden
import { useState } from 'react';
export default function AddTask({onAddTask}) {
@@ -786,7 +786,7 @@ export default function AddTask({onAddTask}) {
}
```
-```js TaskList.js hidden
+```js src/TaskList.js hidden
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -889,7 +889,7 @@ Just like with [updating objects](/learn/updating-objects-in-state#write-concise
<Sandpack>
-```js App.js
+```js src/App.js
import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -964,7 +964,7 @@ const initialTasks = [
];
```
-```js AddTask.js hidden
+```js src/AddTask.js hidden
import { useState } from 'react';
export default function AddTask({onAddTask}) {
@@ -988,7 +988,7 @@ export default function AddTask({onAddTask}) {
}
```
-```js TaskList.js hidden
+```js src/TaskList.js hidden
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -1126,7 +1126,7 @@ This means that your action object should have a `type: 'changed_selection'`. Yo
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1160,7 +1160,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1188,7 +1188,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1209,7 +1209,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -1276,7 +1276,7 @@ Here is the example updated to dispatch the corresponding messages:
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1310,7 +1310,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1338,7 +1338,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1362,7 +1362,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -1420,7 +1420,7 @@ Currently, pressing "Send" doesn't do anything. Add an event handler to the "Sen
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1454,7 +1454,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1482,7 +1482,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1506,7 +1506,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js active
+```js src/Chat.js active
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -1559,7 +1559,7 @@ There are a couple of ways you could do it in the "Send" button event handler. O
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1593,7 +1593,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1621,7 +1621,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1645,7 +1645,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js active
+```js src/Chat.js active
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -1707,7 +1707,7 @@ However, _from the user's perspective_, sending a message is a different action
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1741,7 +1741,7 @@ const contacts = [
];
```
-```js messengerReducer.js active
+```js src/messengerReducer.js active
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1775,7 +1775,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1799,7 +1799,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js active
+```js src/Chat.js active
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -1904,7 +1904,7 @@ The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1938,7 +1938,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
message: 'Hello',
@@ -1972,7 +1972,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -1996,7 +1996,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -2081,7 +2081,7 @@ Here is the complete solution:
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -2115,7 +2115,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
messages: {
@@ -2158,7 +2158,7 @@ export function messengerReducer(state, action) {
}
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -2182,7 +2182,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -2269,7 +2269,7 @@ Recall that a reducer function takes two arguments--the current state and the ac
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from './MyReact.js';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -2303,7 +2303,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
messages: {
@@ -2346,7 +2346,7 @@ export function messengerReducer(state, action) {
}
```
-```js MyReact.js active
+```js src/MyReact.js active
import { useState } from 'react';
export function useReducer(reducer, initialState) {
@@ -2358,7 +2358,7 @@ export function useReducer(reducer, initialState) {
}
```
-```js ContactList.js hidden
+```js src/ContactList.js hidden
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -2382,7 +2382,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js hidden
+```js src/Chat.js hidden
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
@@ -2443,7 +2443,7 @@ Dispatching an action calls a reducer with the current state and the action, and
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from './MyReact.js';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -2477,7 +2477,7 @@ const contacts = [
];
```
-```js messengerReducer.js
+```js src/messengerReducer.js
export const initialState = {
selectedId: 0,
messages: {
@@ -2520,7 +2520,7 @@ export function messengerReducer(state, action) {
}
```
-```js MyReact.js active
+```js src/MyReact.js active
import { useState } from 'react';
export function useReducer(reducer, initialState) {
@@ -2535,7 +2535,7 @@ export function useReducer(reducer, initialState) {
}
```
-```js ContactList.js hidden
+```js src/ContactList.js hidden
export default function ContactList({contacts, selectedId, dispatch}) {
return (
<section className="contact-list">
@@ -2559,7 +2559,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
}
```
-```js Chat.js hidden
+```js src/Chat.js hidden
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 3a39c36db..b458ef402 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -66,7 +66,7 @@ Here both `Profile` and `Gallery` have been moved out of `App.js` into a new fil
<Sandpack>
-```js App.js
+```js src/App.js
import Gallery from './Gallery.js';
export default function App() {
@@ -76,7 +76,7 @@ export default function App() {
}
```
-```js Gallery.js
+```js src/Gallery.js
function Profile() {
return (
<img
@@ -183,7 +183,7 @@ Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `
<Sandpack>
-```js App.js
+```js src/App.js
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';
@@ -194,7 +194,7 @@ export default function App() {
}
```
-```js Gallery.js
+```js src/Gallery.js
export function Profile() {
return (
<img
@@ -268,7 +268,7 @@ Don't forget to import your components where they are called. Doesn't `Gallery`
<Sandpack>
-```js App.js
+```js src/App.js
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';
@@ -281,7 +281,7 @@ export default function App() {
}
```
-```js Gallery.js active
+```js src/Gallery.js active
// Move me to Profile.js!
export function Profile() {
return (
@@ -304,7 +304,7 @@ export default function Gallery() {
}
```
-```js Profile.js
+```js src/Profile.js
```
```css
@@ -321,7 +321,7 @@ This is the solution with named exports:
<Sandpack>
-```js App.js
+```js src/App.js
import Gallery from './Gallery.js';
import { Profile } from './Profile.js';
@@ -335,7 +335,7 @@ export default function App() {
}
```
-```js Gallery.js
+```js src/Gallery.js
import { Profile } from './Profile.js';
export default function Gallery() {
@@ -350,7 +350,7 @@ export default function Gallery() {
}
```
-```js Profile.js
+```js src/Profile.js
export function Profile() {
return (
<img
@@ -371,7 +371,7 @@ This is the solution with default exports:
<Sandpack>
-```js App.js
+```js src/App.js
import Gallery from './Gallery.js';
import Profile from './Profile.js';
@@ -385,7 +385,7 @@ export default function App() {
}
```
-```js Gallery.js
+```js src/Gallery.js
import Profile from './Profile.js';
export default function Gallery() {
@@ -400,7 +400,7 @@ export default function Gallery() {
}
```
-```js Profile.js
+```js src/Profile.js
export default function Profile() {
return (
<img
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index c5426ea94..7251fc31b 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -37,7 +37,7 @@ export default function App() {
You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
-Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
### Try React locally {/*try-react-locally*/}
diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md
index 502916113..736065b03 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -529,7 +529,7 @@ You can also move this expression into a separate function like `getImageUrl` be
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js'
const person = {
@@ -561,7 +561,7 @@ export default function TodoList() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 60760edc5..6d4f55763 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -49,7 +49,7 @@ React is designed around this concept. **React assumes that every component you
<Sandpack>
-```js App.js
+```js src/App.js
function Recipe({ drinkers }) {
return (
<ol>
@@ -243,7 +243,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
if (hours >= 0 && hours <= 6) {
@@ -259,7 +259,7 @@ export default function Clock({ time }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -305,7 +305,7 @@ You can fix this component by calculating the `className` and including it in th
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
let className;
@@ -322,7 +322,7 @@ export default function Clock({ time }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -380,7 +380,7 @@ The buggy code is in `Profile.js`. Make sure you read it all from top to bottom!
<Sandpack>
-```js Profile.js
+```js src/Profile.js
import Panel from './Panel.js';
import { getImageUrl } from './utils.js';
@@ -413,7 +413,7 @@ function Avatar() {
}
```
-```js Panel.js hidden
+```js src/Panel.js hidden
import { useState } from 'react';
export default function Panel({ children }) {
@@ -429,7 +429,7 @@ export default function Panel({ children }) {
}
```
-```js App.js
+```js src/App.js
import Profile from './Profile.js';
export default function App() {
@@ -448,7 +448,7 @@ export default function App() {
}
```
-```js utils.js hidden
+```js src/utils.js hidden
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -481,7 +481,7 @@ To fix the bug, remove the `currentPerson` variable. Instead, pass all informati
<Sandpack>
-```js Profile.js active
+```js src/Profile.js active
import Panel from './Panel.js';
import { getImageUrl } from './utils.js';
@@ -511,7 +511,7 @@ function Avatar({ person }) {
}
```
-```js Panel.js hidden
+```js src/Panel.js hidden
import { useState } from 'react';
export default function Panel({ children }) {
@@ -527,7 +527,7 @@ export default function Panel({ children }) {
}
```
-```js App.js
+```js src/App.js
import Profile from './Profile.js';
export default function App() {
@@ -546,7 +546,7 @@ export default function App() {
}
```
-```js utils.js hidden
+```js src/utils.js hidden
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -583,7 +583,7 @@ You implemented the "Create Story" placeholder by pushing one more fake story at
<Sandpack>
-```js StoryTray.js active
+```js src/StoryTray.js active
export default function StoryTray({ stories }) {
stories.push({
id: 'create',
@@ -602,7 +602,7 @@ export default function StoryTray({ stories }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
@@ -683,7 +683,7 @@ The simplest fix is to not touch the array at all, and render "Create Story" sep
<Sandpack>
-```js StoryTray.js active
+```js src/StoryTray.js active
export default function StoryTray({ stories }) {
return (
<ul>
@@ -698,7 +698,7 @@ export default function StoryTray({ stories }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
@@ -767,7 +767,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo
<Sandpack>
-```js StoryTray.js active
+```js src/StoryTray.js active
export default function StoryTray({ stories }) {
// Copy the array!
let storiesToDisplay = stories.slice();
@@ -790,7 +790,7 @@ export default function StoryTray({ stories }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 5d9554a1a..3dc9a75f0 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -251,7 +251,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -447,7 +447,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -527,7 +527,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -646,7 +646,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -837,7 +837,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -912,7 +912,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -1329,7 +1329,7 @@ Suppressing the linter is always suspicious. Could this be a bug?
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
import {
@@ -1374,7 +1374,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
@@ -1389,7 +1389,7 @@ export default function ChatRoom({ roomId, createConnection }) {
}
```
-```js chat.js
+```js src/chat.js
export function createEncryptedConnection(roomId) {
// A real implementation would actually connect to the server
return {
@@ -1427,7 +1427,7 @@ If you remove the linter suppression, you will see a lint error. The problem is
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
import {
@@ -1472,7 +1472,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
@@ -1486,7 +1486,7 @@ export default function ChatRoom({ roomId, createConnection }) {
}
```
-```js chat.js
+```js src/chat.js
export function createEncryptedConnection(roomId) {
// A real implementation would actually connect to the server
return {
@@ -1522,7 +1522,7 @@ It is correct that `createConnection` is a dependency. However, this code is a b
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -1560,7 +1560,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
import {
createEncryptedConnection,
@@ -1581,7 +1581,7 @@ export default function ChatRoom({ roomId, isEncrypted }) {
}
```
-```js chat.js
+```js src/chat.js
export function createEncryptedConnection(roomId) {
// A real implementation would actually connect to the server
return {
@@ -1633,7 +1633,7 @@ If you have two independent synchronization processes, you need to write two sep
<Sandpack>
-```js App.js
+```js src/App.js
import { useState, useEffect } from 'react';
import { fetchData } from './api.js';
@@ -1687,7 +1687,7 @@ export default function Page() {
}
```
-```js api.js hidden
+```js src/api.js hidden
export function fetchData(url) {
if (url === '/planets') {
return fetchPlanets();
@@ -1782,7 +1782,7 @@ This is why it makes sense to describe them as two separate Effects. Here's an e
<Sandpack>
-```js App.js
+```js src/App.js
import { useState, useEffect } from 'react';
import { fetchData } from './api.js';
@@ -1855,7 +1855,7 @@ export default function Page() {
}
```
-```js api.js hidden
+```js src/api.js hidden
export function fetchData(url) {
if (url === '/planets') {
return fetchPlanets();
@@ -1945,7 +1945,7 @@ Instead, to reduce repetition, you can extract some logic into a custom Hook lik
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { useSelectOptions } from './useSelectOptions.js';
@@ -1991,7 +1991,7 @@ export default function Page() {
}
```
-```js useSelectOptions.js
+```js src/useSelectOptions.js
import { useState, useEffect } from 'react';
import { fetchData } from './api.js';
@@ -2018,7 +2018,7 @@ export function useSelectOptions(url) {
}
```
-```js api.js hidden
+```js src/api.js hidden
export function fetchData(url) {
if (url === '/planets') {
return fetchPlanets();
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c88ae3796..93bcc10fd 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -308,7 +308,7 @@ However, sometimes this is not what you want. In this chat app, typing a message
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -334,7 +334,7 @@ const contacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
selectedContact,
contacts,
@@ -358,7 +358,7 @@ export default function ContactList({
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({ contact }) {
@@ -403,7 +403,7 @@ React lets you override the default behavior, and *force* a component to reset i
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -429,7 +429,7 @@ const contacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
selectedContact,
contacts,
@@ -453,7 +453,7 @@ export default function ContactList({
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({ contact }) {
@@ -506,7 +506,7 @@ Components with many state updates spread across many event handlers can get ove
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -589,7 +589,7 @@ const initialTasks = [
];
```
-```js AddTask.js hidden
+```js src/AddTask.js hidden
import { useState } from 'react';
export default function AddTask({ onAddTask }) {
@@ -610,7 +610,7 @@ export default function AddTask({ onAddTask }) {
}
```
-```js TaskList.js hidden
+```js src/TaskList.js hidden
import { useState } from 'react';
export default function TaskList({
@@ -733,7 +733,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -749,7 +749,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -776,7 +776,7 @@ export default function Heading({ children }) {
}
```
-```js LevelContext.js
+```js src/LevelContext.js
import { createContext } from 'react';
export const LevelContext = createContext(0);
@@ -807,7 +807,7 @@ With this approach, a parent component with complex state manages it with a redu
<Sandpack>
-```js App.js
+```js src/App.js
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
@@ -823,7 +823,7 @@ export default function TaskApp() {
}
```
-```js TasksContext.js
+```js src/TasksContext.js
import { createContext, useContext, useReducer } from 'react';
const TasksContext = createContext(null);
@@ -888,7 +888,7 @@ const initialTasks = [
];
```
-```js AddTask.js
+```js src/AddTask.js
import { useState, useContext } from 'react';
import { useTasksDispatch } from './TasksContext.js';
@@ -917,7 +917,7 @@ export default function AddTask({ onAddTask }) {
let nextId = 3;
```
-```js TaskList.js
+```js src/TaskList.js
import { useState, useContext } from 'react';
import { useTasks, useTasksDispatch } from './TasksContext.js';
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 3e91a7694..2d44d7353 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -218,18 +218,19 @@ This example shows how you can use this approach to scroll to an arbitrary node
<Sandpack>
```js
-import { useRef } from 'react';
+import { useRef, useState } from "react";
export default function CatFriends() {
const itemsRef = useRef(null);
+ const [catList, setCatList] = useState(setupCatList);
- function scrollToId(itemId) {
+ function scrollToCat(cat) {
const map = getMap();
- const node = map.get(itemId);
+ const node = map.get(cat);
node.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- inline: 'center'
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
});
}
@@ -244,34 +245,25 @@ export default function CatFriends() {
return (
<>
<nav>
- <button onClick={() => scrollToId(0)}>
- Tom
- </button>
- <button onClick={() => scrollToId(5)}>
- Maru
- </button>
- <button onClick={() => scrollToId(9)}>
- Jellylorum
- </button>
+ <button onClick={() => scrollToCat(catList[0])}>Tom</button>
+ <button onClick={() => scrollToCat(catList[5])}>Maru</button>
+ <button onClick={() => scrollToCat(catList[9])}>Jellylorum</button>
</nav>
<div>
<ul>
- {catList.map(cat => (
+ {catList.map((cat) => (
<li
- key={cat.id}
+ key={cat}
ref={(node) => {
const map = getMap();
if (node) {
- map.set(cat.id, node);
+ map.set(cat, node);
} else {
- map.delete(cat.id);
+ map.delete(cat);
}
}}
>
- <img
- src={cat.imageUrl}
- alt={'Cat #' + cat.id}
- />
+ <img src={cat} />
</li>
))}
</ul>
@@ -280,12 +272,13 @@ export default function CatFriends() {
);
}
-const catList = [];
-for (let i = 0; i < 10; i++) {
- catList.push({
- id: i,
- imageUrl: 'https://placekitten.com/250/200?image=' + i
- });
+function setupCatList() {
+ const catList = [];
+ for (let i = 0; i < 10; i++) {
+ catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
+ }
+
+ return catList;
}
```
@@ -316,6 +309,16 @@ li {
}
```
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0"
+ }
+}
+```
+
</Sandpack>
In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
@@ -327,10 +330,10 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
const map = getMap();
if (node) {
// Add to the Map
- map.set(cat.id, node);
+ map.set(cat, node);
} else {
// Remove from the Map
- map.delete(cat.id);
+ map.delete(cat);
}
}}
>
@@ -338,6 +341,28 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
This lets you read individual DOM nodes from the Map later.
+<Canary>
+
+This example shows another approach for managing the Map with a `ref` callback cleanup function.
+
+```js
+<li
+ key={cat.id}
+ ref={node => {
+ const map = getMap();
+ // Add to the Map
+ map.set(cat, node);
+
+ return () => {
+ // Remove from the Map
+ map.delete(cat);
+ };
+ }}
+>
+```
+
+</Canary>
+
</DeepDive>
## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
@@ -493,7 +518,7 @@ In general, you [don't want](/learn/referencing-values-with-refs#best-practices-
React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
+**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
<DeepDive>
@@ -1098,7 +1123,7 @@ You'll need `forwardRef` to opt into exposing a DOM node from your own component
<Sandpack>
-```js App.js
+```js src/App.js
import SearchButton from './SearchButton.js';
import SearchInput from './SearchInput.js';
@@ -1114,7 +1139,7 @@ export default function Page() {
}
```
-```js SearchButton.js
+```js src/SearchButton.js
export default function SearchButton() {
return (
<button>
@@ -1124,7 +1149,7 @@ export default function SearchButton() {
}
```
-```js SearchInput.js
+```js src/SearchInput.js
export default function SearchInput() {
return (
<input
@@ -1146,7 +1171,7 @@ You'll need to add an `onClick` prop to the `SearchButton`, and make the `Search
<Sandpack>
-```js App.js
+```js src/App.js
import { useRef } from 'react';
import SearchButton from './SearchButton.js';
import SearchInput from './SearchInput.js';
@@ -1166,7 +1191,7 @@ export default function Page() {
}
```
-```js SearchButton.js
+```js src/SearchButton.js
export default function SearchButton({ onClick }) {
return (
<button onClick={onClick}>
@@ -1176,7 +1201,7 @@ export default function SearchButton({ onClick }) {
}
```
-```js SearchInput.js
+```js src/SearchInput.js
import { forwardRef } from 'react';
export default forwardRef(
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 31405c0af..1aea87b35 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -64,7 +64,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
export default function Section({ children }) {
return (
<section className="section">
@@ -74,7 +74,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
export default function Heading({ level, children }) {
switch (level) {
case 1:
@@ -138,7 +138,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
export default function Section({ children }) {
return (
<section className="section">
@@ -148,7 +148,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
export default function Heading({ level, children }) {
switch (level) {
case 1:
@@ -260,7 +260,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
export default function Section({ children }) {
return (
<section className="section">
@@ -270,7 +270,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
export default function Heading({ level, children }) {
switch (level) {
case 1:
@@ -291,7 +291,7 @@ export default function Heading({ level, children }) {
}
```
-```js LevelContext.js active
+```js src/LevelContext.js active
import { createContext } from 'react';
export const LevelContext = createContext(1);
@@ -390,7 +390,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
export default function Section({ children }) {
return (
<section className="section">
@@ -400,7 +400,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -425,7 +425,7 @@ export default function Heading({ children }) {
}
```
-```js LevelContext.js
+```js src/LevelContext.js
import { createContext } from 'react';
export const LevelContext = createContext(1);
@@ -508,7 +508,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
@@ -522,7 +522,7 @@ export default function Section({ level, children }) {
}
```
-```js Heading.js
+```js src/Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -547,7 +547,7 @@ export default function Heading({ children }) {
}
```
-```js LevelContext.js
+```js src/LevelContext.js
import { createContext } from 'react';
export const LevelContext = createContext(1);
@@ -587,7 +587,7 @@ export default function Page() {
Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it:
-```js Section.js {5,8}
+```js src/Section.js {5,8}
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -635,7 +635,7 @@ export default function Page() {
}
```
-```js Section.js
+```js src/Section.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -651,7 +651,7 @@ export default function Section({ children }) {
}
```
-```js Heading.js
+```js src/Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -678,7 +678,7 @@ export default function Heading({ children }) {
}
```
-```js LevelContext.js
+```js src/LevelContext.js
import { createContext } from 'react';
export const LevelContext = createContext(0);
@@ -765,7 +765,7 @@ function Post({ title, body }) {
}
```
-```js Section.js
+```js src/Section.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -784,7 +784,7 @@ export default function Section({ children, isFancy }) {
}
```
-```js Heading.js
+```js src/Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
@@ -811,7 +811,7 @@ export default function Heading({ children }) {
}
```
-```js LevelContext.js
+```js src/LevelContext.js
import { createContext } from 'react';
export const LevelContext = createContext(0);
@@ -887,7 +887,7 @@ You can declare context in `Context.js`.
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { places } from './data.js';
import { getImageUrl } from './utils.js';
@@ -952,11 +952,11 @@ function PlaceImage({ place, imageSize }) {
}
```
-```js Context.js
+```js src/Context.js
```
-```js data.js
+```js src/data.js
export const places = [{
id: 0,
name: 'Bo-Kaap in Cape Town, South Africa',
@@ -995,7 +995,7 @@ export const places = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(place) {
return (
'https://i.imgur.com/' +
@@ -1026,7 +1026,7 @@ Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into
<Sandpack>
-```js App.js
+```js src/App.js
import { useState, useContext } from 'react';
import { places } from './data.js';
import { getImageUrl } from './utils.js';
@@ -1089,13 +1089,13 @@ function PlaceImage({ place }) {
}
```
-```js Context.js
+```js src/Context.js
import { createContext } from 'react';
export const ImageSizeContext = createContext(500);
```
-```js data.js
+```js src/data.js
export const places = [{
id: 0,
name: 'Bo-Kaap in Cape Town, South Africa',
@@ -1134,7 +1134,7 @@ export const places = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(place) {
return (
'https://i.imgur.com/' +
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index 8e756c2f3..aae682d14 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -106,7 +106,7 @@ Now you can configure `Avatar` to render in many different ways with different p
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
function Avatar({ person, size }) {
@@ -150,7 +150,7 @@ export default function Profile() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -275,7 +275,7 @@ When you nest content inside a JSX tag, the parent component will receive that c
<Sandpack>
-```js App.js
+```js src/App.js
import Avatar from './Avatar.js';
function Card({ children }) {
@@ -301,7 +301,7 @@ export default function Profile() {
}
```
-```js Avatar.js
+```js src/Avatar.js
import { getImageUrl } from './utils.js';
export default function Avatar({ person, size }) {
@@ -317,7 +317,7 @@ export default function Avatar({ person, size }) {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -361,7 +361,7 @@ Try changing the color in the select box below:
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
export default function Clock({ color, time }) {
return (
<h1 style={{ color: color }}>
@@ -371,7 +371,7 @@ export default function Clock({ color, time }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
@@ -435,7 +435,7 @@ This `Gallery` component contains some very similar markup for two profiles. Ext
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
export default function Gallery() {
@@ -495,7 +495,7 @@ export default function Gallery() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(imageId, size = 's') {
return (
'https://i.imgur.com/' +
@@ -536,7 +536,7 @@ Note that the `imageSize` prop has a default value, which is why we don't pass i
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
function Profile({
@@ -603,7 +603,7 @@ export default function Gallery() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(imageId, size = 's') {
return (
'https://i.imgur.com/' +
@@ -636,7 +636,7 @@ Another solution, which is more similar to the earlier examples on this page, is
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
function Profile({ person, imageSize = 70 }) {
@@ -700,7 +700,7 @@ export default function Gallery() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
@@ -739,7 +739,7 @@ Change the `Avatar` component to request the closest image size based on the `si
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
function Avatar({ person, size }) {
@@ -767,7 +767,7 @@ export default function Profile() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size) {
return (
'https://i.imgur.com/' +
@@ -790,7 +790,7 @@ Here is how you could go about it:
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
function Avatar({ person, size }) {
@@ -831,7 +831,7 @@ export default function Profile() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size) {
return (
'https://i.imgur.com/' +
@@ -852,7 +852,7 @@ You could also show a sharper image for high DPI screens by taking [`window.devi
<Sandpack>
-```js App.js
+```js src/App.js
import { getImageUrl } from './utils.js';
const ratio = window.devicePixelRatio;
@@ -902,7 +902,7 @@ export default function Profile() {
}
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person, size) {
return (
'https://i.imgur.com/' +
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 709d9e3d3..d35071845 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1025,7 +1025,7 @@ In this chat app, the `<Chat>` component contains the text input state:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1051,7 +1051,7 @@ const contacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
selectedContact,
contacts,
@@ -1075,7 +1075,7 @@ export default function ContactList({
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({ contact }) {
@@ -1130,7 +1130,7 @@ Now switching the recipient always clears the text field:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
@@ -1156,7 +1156,7 @@ const contacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
selectedContact,
contacts,
@@ -1180,7 +1180,7 @@ export default function ContactList({
}
```
-```js Chat.js
+```js src/Chat.js
import { useState } from 'react';
export default function Chat({ contact }) {
@@ -1254,7 +1254,7 @@ This example shows a message when you press the button. However, pressing the bu
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -1305,7 +1305,7 @@ The easiest solution is to unify the branches so that `Form` always renders in t
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -1351,7 +1351,7 @@ Technically, you could also add `null` before `<Form />` in the `else` branch to
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -1413,7 +1413,7 @@ It seems like for these fields, their position within the parent is not enough.
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -1475,7 +1475,7 @@ Give a `key` to both `<Field>` components in both `if` and `else` branches. This
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -1541,7 +1541,7 @@ When you select a different contact (for example, Alice), the state updates but
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ContactList from './ContactList.js';
import EditContact from './EditContact.js';
@@ -1593,7 +1593,7 @@ const initialContacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
contacts,
selectedId,
@@ -1620,7 +1620,7 @@ export default function ContactList({
}
```
-```js EditContact.js
+```js src/EditContact.js
import { useState } from 'react';
export default function EditContact({ initialData, onSave }) {
@@ -1693,7 +1693,7 @@ Give `key={selectedId}` to the `EditContact` component. This way, switching betw
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ContactList from './ContactList.js';
import EditContact from './EditContact.js';
@@ -1746,7 +1746,7 @@ const initialContacts = [
];
```
-```js ContactList.js
+```js src/ContactList.js
export default function ContactList({
contacts,
selectedId,
@@ -1773,7 +1773,7 @@ export default function ContactList({
}
```
-```js EditContact.js
+```js src/EditContact.js
import { useState } from 'react';
export default function EditContact({ initialData, onSave }) {
@@ -1994,7 +1994,7 @@ Fix it so that the expanded state is associated with each contact, regardless of
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Contact from './Contact.js';
@@ -2036,7 +2036,7 @@ const contacts = [
];
```
-```js Contact.js
+```js src/Contact.js
import { useState } from 'react';
export default function Contact({ contact }) {
@@ -2093,7 +2093,7 @@ Using the contact ID as a `key` instead fixes the issue:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Contact from './Contact.js';
@@ -2135,7 +2135,7 @@ const contacts = [
];
```
-```js Contact.js
+```js src/Contact.js
import { useState } from 'react';
export default function Contact({ contact }) {
diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md
index a63b7205b..41de6529a 100644
--- a/src/content/learn/queueing-a-series-of-state-updates.md
+++ b/src/content/learn/queueing-a-series-of-state-updates.md
@@ -404,7 +404,7 @@ Fill out the missing lines!
<Sandpack>
-```js processQueue.js active
+```js src/processQueue.js active
export function getFinalState(baseState, queue) {
let finalState = baseState;
@@ -414,7 +414,7 @@ export function getFinalState(baseState, queue) {
}
```
-```js App.js
+```js src/App.js
import { getFinalState } from './processQueue.js';
function increment(n) {
@@ -499,7 +499,7 @@ This is the exact algorithm described on this page that React uses to calculate
<Sandpack>
-```js processQueue.js active
+```js src/processQueue.js active
export function getFinalState(baseState, queue) {
let finalState = baseState;
@@ -517,7 +517,7 @@ export function getFinalState(baseState, queue) {
}
```
-```js App.js
+```js src/App.js
import { getFinalState } from './processQueue.js';
function increment(n) {
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
new file mode 100644
index 000000000..f34c382ed
--- /dev/null
+++ b/src/content/learn/react-compiler.md
@@ -0,0 +1,410 @@
+---
+title: React Compiler
+---
+
+<Intro>
+This page will give you an introduction to the new experimental React Compiler and how to try it out successfully.
+</Intro>
+
+<Wip>
+These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable.
+</Wip>
+
+<YouWillLearn>
+
+* Getting started with the compiler
+* Installing the compiler and eslint plugin
+* Troubleshooting
+
+</YouWillLearn>
+
+<Note>
+React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.
+
+React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible.
+</Note>
+
+React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+
+The compiler also includes an [eslint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. The plugin runs independently of the compiler and can be used even if you aren't using the compiler in your app. We recommend all React developers to use this eslint plugin to help improve the quality of your codebase.
+
+### What does the compiler do? {/*what-does-the-compiler-do*/}
+
+In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as `useMemo`, `useCallback`, and `React.memo`. With these APIs you can tell React that certain parts of your application don't need to recompute if their inputs haven't changed, reducing work on updates. While powerful, it's easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don't have any _meaningful_ changes.
+
+The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
+
+If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
+
+<DeepDive>
+#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+The initial release of React Compiler is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+
+1. **Skipping cascading re-rendering of components**
+ * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
+1. **Skipping expensive calculations from outside of React**
+ * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+
+#### Optimizing Re-renders {/*optimizing-re-renders*/}
+
+React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ β unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+
+```javascript
+function FriendList({ friends }) {
+ const onlineCount = useFriendOnlineCount();
+ if (friends.length === 0) {
+ return <NoFriends />;
+ }
+ return (
+ <div>
+ <span>{onlineCount} online</span>
+ {friends.map((friend) => (
+ <FriendListCard key={friend.id} friend={friend} />
+ ))}
+ <MessageButton />
+ </div>
+ );
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+
+React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+
+#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+
+The compiler can also automatically memoize for expensive calculations used during rendering:
+
+```js
+// **Not** memoized by React Compiler, since this is not a component or hook
+function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
+
+// Memoized by React Compiler since this is a component
+function TableContainer({ items }) {
+ // This function call would be memoized:
+ const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
+ // ...
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+
+However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+
+- React Compiler only memoizes React components and hooks, not every function
+- React Compiler's memoization is not shared across multiple components or hooks
+
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+</DeepDive>
+
+### What does the compiler assume? {/*what-does-the-compiler-assume*/}
+
+React Compiler assumes that your code:
+
+1. Is valid, semantic JavaScript
+2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`
+3. Follows the [Rules of React](https://react.dev/reference/rules)
+
+React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
+
+### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+Please note that the compiler is still experimental and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+
+**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better.
+
+## Getting Started {/*getting-started*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
+### Checking compatibility {/*checking-compatibility*/}
+
+Prior to installing the compiler, you can first check to see if your codebase is compatible:
+
+<TerminalBlock>
+npx react-compiler-healthcheck@latest
+</TerminalBlock>
+
+This script will:
+
+- Check how many components can be successfully optimized: higher is better
+- Check for `<StrictMode>` usage: having this enabled and followed means a higher chance that the [Rules of React](/reference/rules) are followed
+- Check for incompatible library usage: known libraries that are incompatible with the compiler
+
+As an example:
+
+<TerminalBlock>
+Successfully compiled 8 out of 9 components.
+StrictMode usage not found.
+Found no usage of incompatible libraries.
+</TerminalBlock>
+
+### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
+
+React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
+
+<TerminalBlock>
+npm install eslint-plugin-react-compiler
+</TerminalBlock>
+
+Then, add it to your eslint config:
+
+```js
+module.exports = {
+ plugins: [
+ 'eslint-plugin-react-compiler',
+ ],
+ rules: {
+ 'react-compiler/react-compiler': "error",
+ },
+}
+```
+
+The eslint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.
+
+**You don't have to fix all eslint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
+
+### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
+
+#### Existing projects {/*existing-projects*/}
+The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior.
+
+For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories:
+
+```js {3}
+const ReactCompilerConfig = {
+ sources: (filename) => {
+ return filename.indexOf('src/path/to/dir') !== -1;
+ },
+};
+```
+
+In rare cases, you can also configure the compiler to run in "opt-in" mode using the `compilationMode: "annotation"` option. This makes it so the compiler will only compile components and hooks annotated with a `"use memo"` directive. Please note that the `annotation` mode is a temporary one to aid early adopters, and that we don't intend for the `"use memo"` directive to be used for the long term.
+
+```js {2,7}
+const ReactCompilerConfig = {
+ compilationMode: "annotation",
+};
+
+// src/app.jsx
+export default function App() {
+ "use memo";
+ // ...
+}
+```
+
+When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
+
+#### New projects {/*new-projects*/}
+
+If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
+
+## Usage {/*installation*/}
+
+### Babel {/*usage-with-babel*/}
+
+<TerminalBlock>
+npm install babel-plugin-react-compiler
+</TerminalBlock>
+
+The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
+
+After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline:
+
+```js {7}
+// babel.config.js
+const ReactCompilerConfig = { /* ... */ };
+
+module.exports = function () {
+ return {
+ plugins: [
+ ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
+ // ...
+ ],
+ };
+};
+```
+
+`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
+
+### Vite {/*usage-with-vite*/}
+
+If you use Vite, you can add the plugin to vite-plugin-react:
+
+```js {10}
+// vite.config.js
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig(() => {
+ return {
+ plugins: [
+ react({
+ babel: {
+ plugins: [
+ ["babel-plugin-react-compiler", ReactCompilerConfig],
+ ],
+ },
+ }),
+ ],
+ // ...
+ };
+});
+```
+
+### Next.js {/*usage-with-nextjs*/}
+
+Next.js has an experimental configuration to enable the React Compiler. It automatically ensures Babel is set up with `babel-plugin-react-compiler`.
+
+- Install Next.js canary, which uses React 19 Release Candidate
+- Install `babel-plugin-react-compiler`
+
+<TerminalBlock>
+npm install next@canary babel-plugin-react-compiler
+</TerminalBlock>
+
+Then configure the experimental option in `next.config.js`:
+
+```js {4,5,6}
+// next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ experimental: {
+ reactCompiler: true,
+ },
+};
+
+module.exports = nextConfig;
+```
+
+Using the experimental option ensures support for the React Compiler in:
+
+- App Router
+- Pages Router
+- Webpack (default)
+- Turbopack (opt-in through `--turbo`)
+
+
+### Remix {/*usage-with-remix*/}
+Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+<TerminalBlock>
+npm install vite-plugin-babel
+</TerminalBlock>
+
+```js {2,14}
+// vite.config.js
+import babel from "vite-plugin-babel";
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig({
+ plugins: [
+ remix({ /* ... */}),
+ babel({
+ filter: /\.[jt]sx?$/,
+ babelConfig: {
+ presets: ["@babel/preset-typescript"], // if you use TypeScript
+ plugins: [
+ ["babel-plugin-react-compiler", ReactCompilerConfig],
+ ],
+ },
+ }),
+ ],
+});
+```
+
+### Webpack {/*usage-with-webpack*/}
+
+You can create your own loader for React Compiler, like so:
+
+```js
+const ReactCompilerConfig = { /* ... */ };
+const BabelPluginReactCompiler = require('babel-plugin-react-compiler');
+
+function reactCompilerLoader(sourceCode, sourceMap) {
+ // ...
+ const result = transformSync(sourceCode, {
+ // ...
+ plugins: [
+ [BabelPluginReactCompiler, ReactCompilerConfig],
+ ],
+ // ...
+ });
+
+ if (result === null) {
+ this.callback(
+ Error(
+ `Failed to transform "${options.filename}"`
+ )
+ );
+ return;
+ }
+
+ this.callback(
+ null,
+ result.code,
+ result.map === null ? undefined : result.map
+ );
+}
+
+module.exports = reactCompilerLoader;
+```
+
+### Expo {/*usage-with-expo*/}
+
+Please refer to [Expo's docs](https://docs.expo.dev/preview/react-compiler/) to enable and use the React Compiler in Expo apps.
+
+### Metro (React Native) {/*usage-with-react-native-metro*/}
+
+React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
+
+### Rspack {/*usage-with-rspack*/}
+
+Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+
+### Rsbuild {/*usage-with-rsbuild*/}
+
+Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+
+## Troubleshooting {/*troubleshooting*/}
+
+To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo.
+
+You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler).
+
+### `(0 , _c) is not a function` error {/*0--_c-is-not-a-function-error*/}
+
+This occurs if you are not using React 19 RC and up. To fix this, [upgrade your app to React 19 RC](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) first.
+
+If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible.
+
+### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
+
+[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo β¨" badge next to components that have been optimized by the compiler.
+
+### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
+If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all eslint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
+
+Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases.
+
+If your app doesn't work properly after compilation and you aren't seeing any eslint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).
+
+```js {2}
+function SuspiciousComponent() {
+ "use no memo"; // opts out this component from being compiled by React Compiler
+ // ...
+}
+```
+
+<Note>
+#### `"use no memo"` {/*use-no-memo*/}
+
+`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is.
+
+It is not recommended to reach for this directive unless it's strictly necessary. Once you opt-out a component or hook, it is opted-out forever until the directive is removed. This means that even if you fix the code, the compiler will still skip over compiling it unless you remove the directive.
+</Note>
+
+When you make the error go away, confirm that removing the opt out directive makes the issue come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue.
+
+### Other issues {/*other-issues*/}
+
+Please see https://github.com/reactwg/react-compiler/discussions/7.
diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 29f60ca6d..da559dc0f 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -35,7 +35,7 @@ In this example of imperative UI programming, the form is built *without* React.
<Sandpack>
-```js index.js active
+```js src/index.js active
async function handleFormSubmit(e) {
e.preventDefault();
disable(textarea);
@@ -246,7 +246,7 @@ If a component has a lot of visual states, it can be convenient to show them all
<Sandpack>
-```js App.js active
+```js src/App.js active
import Form from './Form.js';
let statuses = [
@@ -271,7 +271,7 @@ export default function App() {
}
```
-```js Form.js
+```js src/Form.js
export default function Form({ status }) {
if (status === 'success') {
return <h1>That's right!</h1>
@@ -545,6 +545,7 @@ body { margin: 0; padding: 0; height: 250px; }
width: 200px;
height: 200px;
border-radius: 10px;
+ border: 5px solid transparent;
}
.picture--active {
@@ -707,7 +708,7 @@ Here is a small form implemented with plain JavaScript and DOM. Play with it to
<Sandpack>
-```js index.js active
+```js src/index.js active
function handleFormSubmit(e) {
e.preventDefault();
if (editButton.textContent === 'Edit Profile') {
@@ -909,7 +910,7 @@ Here is the original sandbox from the previous challenge, written imperatively w
<Sandpack>
-```js index.js active
+```js src/index.js active
function handleFormSubmit(e) {
e.preventDefault();
if (editButton.textContent === 'Edit Profile') {
@@ -1008,7 +1009,7 @@ If you're struggling to think where to start, the stub below already has most of
<Sandpack>
-```js index.js active
+```js src/index.js active
let firstName = 'Jane';
let lastName = 'Jacobs';
let isEditing = false;
@@ -1115,7 +1116,7 @@ The missing logic included toggling the display of inputs and content, and updat
<Sandpack>
-```js index.js active
+```js src/index.js active
let firstName = 'Jane';
let lastName = 'Jacobs';
let isEditing = false;
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 9195cccc0..9a871c6c3 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -75,7 +75,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -150,7 +150,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -242,7 +242,7 @@ export default function ChatRoom() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
return {
@@ -846,7 +846,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
return {
@@ -1023,7 +1023,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
return {
@@ -1335,7 +1335,7 @@ export default function App() {
}
```
-```js animation.js
+```js src/animation.js
export class FadeInAnimation {
constructor(node) {
this.node = node;
@@ -1466,7 +1466,7 @@ export default function App() {
}
```
-```js animation.js
+```js src/animation.js
export class FadeInAnimation {
constructor(node) {
this.node = node;
@@ -1523,7 +1523,7 @@ There's more than one way to fix this, but ultimately you want to avoid having a
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -1567,7 +1567,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useEffect } from 'react';
import { createConnection } from './chat.js';
@@ -1582,7 +1582,7 @@ export default function ChatRoom({ options }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -1617,7 +1617,7 @@ The least invasive fix is to read `roomId` and `serverUrl` right outside the Eff
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -1661,7 +1661,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useEffect } from 'react';
import { createConnection } from './chat.js';
@@ -1680,7 +1680,7 @@ export default function ChatRoom({ options }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -1711,7 +1711,7 @@ It would be even better to replace the object `options` prop with the more speci
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -1753,7 +1753,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
@@ -1771,7 +1771,7 @@ export default function ChatRoom({ roomId, serverUrl }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -1839,7 +1839,7 @@ Another of these functions only exists to pass some state to an imported API met
}
```
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
import {
@@ -1905,7 +1905,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
@@ -1921,7 +1921,7 @@ export default function ChatRoom({ roomId, createConnection, onMessage }) {
}
```
-```js chat.js
+```js src/chat.js
export function createEncryptedConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -2005,7 +2005,7 @@ export function createUnencryptedConnection({ serverUrl, roomId }) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -2134,7 +2134,7 @@ As a result, the chat re-connects only when something meaningful (`roomId` or `i
}
```
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -2187,7 +2187,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
import {
@@ -2221,7 +2221,7 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
}
```
-```js chat.js
+```js src/chat.js
export function createEncryptedConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -2305,7 +2305,7 @@ export function createUnencryptedConnection({ serverUrl, roomId }) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index 84bf904cd..3f0593599 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -42,7 +42,7 @@ When your app starts, you need to trigger the initial render. Frameworks and san
<Sandpack>
-```js index.js active
+```js src/index.js active
import Image from './Image.js';
import { createRoot } from 'react-dom/client';
@@ -50,7 +50,7 @@ const root = createRoot(document.getElementById('root'))
root.render(<Image />);
```
-```js Image.js
+```js src/Image.js
export default function Image() {
return (
<img
@@ -88,7 +88,7 @@ In the following example, React will call `Gallery()` and `Image()` several tim
<Sandpack>
-```js Gallery.js active
+```js src/Gallery.js active
export default function Gallery() {
return (
<section>
@@ -110,7 +110,7 @@ function Image() {
}
```
-```js index.js
+```js src/index.js
import Gallery from './Gallery.js';
import { createRoot } from 'react-dom/client';
@@ -157,7 +157,7 @@ After rendering (calling) your components, React will modify the DOM.
<Sandpack>
-```js Clock.js active
+```js src/Clock.js active
export default function Clock({ time }) {
return (
<>
@@ -168,7 +168,7 @@ export default function Clock({ time }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState, useEffect } from 'react';
import Clock from './Clock.js';
diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md
index 5b07afd93..32f81c447 100644
--- a/src/content/learn/rendering-lists.md
+++ b/src/content/learn/rendering-lists.md
@@ -113,9 +113,11 @@ const people = [{
name: 'Mohammad Abdus Salam',
profession: 'physicist',
}, {
+ id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
}, {
+ id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
}];
@@ -159,7 +161,7 @@ return <ul>{listItems}</ul>;
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -184,7 +186,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -218,7 +220,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -292,7 +294,7 @@ Rather than generating keys on the fly, you should include them in your data:
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -314,7 +316,7 @@ export default function List() {
}
```
-```js data.js active
+```js src/data.js active
export const people = [{
id: 0, // Used in JSX as a key
name: 'Creola Katherine Johnson',
@@ -348,7 +350,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -448,7 +450,7 @@ Change it to show two separate lists one after another: **Chemists** and **Every
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -475,7 +477,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -509,7 +511,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -539,7 +541,7 @@ You could use `filter()` twice, creating two separate arrays, and then `map` ove
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -590,7 +592,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -624,7 +626,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -654,7 +656,7 @@ There is still a bit duplication between the rendered lists. You can go further
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -704,7 +706,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -738,7 +740,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -768,7 +770,7 @@ In fact, if `people` never change, you could move this code out of your componen
<Sandpack>
-```js App.js
+```js src/App.js
import { people } from './data.js';
import { getImageUrl } from './utils.js';
@@ -822,7 +824,7 @@ export default function List() {
}
```
-```js data.js
+```js src/data.js
export const people = [{
id: 0,
name: 'Creola Katherine Johnson',
@@ -856,7 +858,7 @@ export const people = [{
}];
```
-```js utils.js
+```js src/utils.js
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
@@ -894,7 +896,7 @@ This will require nesting two different `map` calls.
<Sandpack>
-```js App.js
+```js src/App.js
import { recipes } from './data.js';
export default function RecipeList() {
@@ -906,7 +908,7 @@ export default function RecipeList() {
}
```
-```js data.js
+```js src/data.js
export const recipes = [{
id: 'greek-salad',
name: 'Greek Salad',
@@ -930,7 +932,7 @@ Here is one way you could go about it:
<Sandpack>
-```js App.js
+```js src/App.js
import { recipes } from './data.js';
export default function RecipeList() {
@@ -954,7 +956,7 @@ export default function RecipeList() {
}
```
-```js data.js
+```js src/data.js
export const recipes = [{
id: 'greek-salad',
name: 'Greek Salad',
@@ -982,7 +984,7 @@ This `RecipeList` component contains two nested `map` calls. To simplify it, ext
<Sandpack>
-```js App.js
+```js src/App.js
import { recipes } from './data.js';
export default function RecipeList() {
@@ -1006,7 +1008,7 @@ export default function RecipeList() {
}
```
-```js data.js
+```js src/data.js
export const recipes = [{
id: 'greek-salad',
name: 'Greek Salad',
@@ -1060,7 +1062,7 @@ export default function RecipeList() {
}
```
-```js data.js
+```js src/data.js
export const recipes = [{
id: 'greek-salad',
name: 'Greek Salad',
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 4450c4613..17bd087ed 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -629,7 +629,7 @@ After you do this, notice that clicking the button also increments the page clic
<Sandpack>
-```js ColorSwitch.js active
+```js src/ColorSwitch.js active
export default function ColorSwitch({
onChangeColor
}) {
@@ -641,7 +641,7 @@ export default function ColorSwitch({
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import ColorSwitch from './ColorSwitch.js';
@@ -685,7 +685,7 @@ However, this introduces the problem of the incrementing counter. If `onChangeCo
<Sandpack>
-```js ColorSwitch.js active
+```js src/ColorSwitch.js active
export default function ColorSwitch({
onChangeColor
}) {
@@ -700,7 +700,7 @@ export default function ColorSwitch({
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import ColorSwitch from './ColorSwitch.js';
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 679a9bac2..67de5e97f 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -184,7 +184,7 @@ export default function App() {
}
```
-```js useOnlineStatus.js
+```js src/useOnlineStatus.js
import { useState, useEffect } from 'react';
export function useOnlineStatus() {
@@ -402,7 +402,7 @@ export default function Form() {
}
```
-```js useFormInput.js active
+```js src/useFormInput.js active
import { useState } from 'react';
export function useFormInput(initialValue) {
@@ -453,7 +453,7 @@ Because custom Hooks re-render together with your component, they always receive
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -481,7 +481,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
import { showNotification } from './notifications.js';
@@ -514,7 +514,7 @@ export default function ChatRoom({ roomId }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -557,7 +557,7 @@ export function createConnection({ serverUrl, roomId }) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -649,7 +649,7 @@ Notice that the logic *still responds* to prop and state changes. Try editing th
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -677,7 +677,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState } from 'react';
import { useChatRoom } from './useChatRoom.js';
@@ -701,7 +701,7 @@ export default function ChatRoom({ roomId }) {
}
```
-```js useChatRoom.js
+```js src/useChatRoom.js
import { useEffect } from 'react';
import { createConnection } from './chat.js';
import { showNotification } from './notifications.js';
@@ -722,7 +722,7 @@ export function useChatRoom({ serverUrl, roomId }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -765,7 +765,7 @@ export function createConnection({ serverUrl, roomId }) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -927,7 +927,7 @@ Now the chat won't re-connect every time that the `ChatRoom` component re-render
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
@@ -955,7 +955,7 @@ export default function App() {
}
```
-```js ChatRoom.js active
+```js src/ChatRoom.js active
import { useState } from 'react';
import { useChatRoom } from './useChatRoom.js';
import { showNotification } from './notifications.js';
@@ -983,7 +983,7 @@ export default function ChatRoom({ roomId }) {
}
```
-```js useChatRoom.js
+```js src/useChatRoom.js
import { useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
import { createConnection } from './chat.js';
@@ -1006,7 +1006,7 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection({ serverUrl, roomId }) {
// A real implementation would actually connect to the server
if (typeof serverUrl !== 'string') {
@@ -1049,7 +1049,7 @@ export function createConnection({ serverUrl, roomId }) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -1306,7 +1306,7 @@ export default function App() {
}
```
-```js useOnlineStatus.js active
+```js src/useOnlineStatus.js active
import { useState, useEffect } from 'react';
export function useOnlineStatus() {
@@ -1369,7 +1369,7 @@ export default function App() {
}
```
-```js useOnlineStatus.js active
+```js src/useOnlineStatus.js active
import { useSyncExternalStore } from 'react';
function subscribe(callback) {
@@ -1554,7 +1554,7 @@ export default function App() {
}
```
-```js useFadeIn.js
+```js src/useFadeIn.js
import { useEffect } from 'react';
export function useFadeIn(ref, duration) {
@@ -1645,7 +1645,7 @@ export default function App() {
}
```
-```js useFadeIn.js active
+```js src/useFadeIn.js active
import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
@@ -1749,7 +1749,7 @@ export default function App() {
}
```
-```js useFadeIn.js active
+```js src/useFadeIn.js active
import { useState, useEffect } from 'react';
import { FadeInAnimation } from './animation.js';
@@ -1764,7 +1764,7 @@ export function useFadeIn(ref, duration) {
}
```
-```js animation.js
+```js src/animation.js
export class FadeInAnimation {
constructor(node) {
this.node = node;
@@ -1845,12 +1845,12 @@ export default function App() {
}
```
-```css styles.css
+```css src/styles.css
label, button { display: block; margin-bottom: 20px; }
html, body { min-height: 300px; }
```
-```css welcome.css active
+```css src/welcome.css active
.welcome {
color: white;
padding: 50px;
@@ -1899,7 +1899,7 @@ export default function Counter() {
}
```
-You'll need to write your custom Hook in `useCounter.js` and import it into the `Counter.js` file.
+You'll need to write your custom Hook in `useCounter.js` and import it into the `App.js` file.
<Sandpack>
@@ -1918,7 +1918,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
// Write your custom Hook in this file!
```
@@ -1939,7 +1939,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState, useEffect } from 'react';
export function useCounter() {
@@ -1993,7 +1993,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState, useEffect } from 'react';
export function useCounter() {
@@ -2043,7 +2043,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState, useEffect } from 'react';
export function useCounter(delay) {
@@ -2090,7 +2090,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState, useEffect } from 'react';
export function useCounter(delay) {
@@ -2105,7 +2105,7 @@ export function useCounter(delay) {
}
```
-```js useInterval.js
+```js src/useInterval.js
// Write your Hook here!
```
@@ -2126,7 +2126,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState } from 'react';
import { useInterval } from './useInterval.js';
@@ -2139,7 +2139,7 @@ export function useCounter(delay) {
}
```
-```js useInterval.js active
+```js src/useInterval.js active
import { useEffect } from 'react';
export function useInterval(onTick, delay) {
@@ -2219,7 +2219,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState } from 'react';
import { useInterval } from './useInterval.js';
@@ -2232,7 +2232,7 @@ export function useCounter(delay) {
}
```
-```js useInterval.js
+```js src/useInterval.js
import { useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
@@ -2291,7 +2291,7 @@ export default function Counter() {
}
```
-```js useCounter.js
+```js src/useCounter.js
import { useState } from 'react';
import { useInterval } from './useInterval.js';
@@ -2304,7 +2304,7 @@ export function useCounter(delay) {
}
```
-```js useInterval.js active
+```js src/useInterval.js active
import { useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
@@ -2384,7 +2384,7 @@ function Dot({ position, opacity }) {
}
```
-```js usePointerPosition.js
+```js src/usePointerPosition.js
import { useState, useEffect } from 'react';
export function usePointerPosition() {
@@ -2463,7 +2463,7 @@ function Dot({ position, opacity }) {
}
```
-```js usePointerPosition.js
+```js src/usePointerPosition.js
import { useState, useEffect } from 'react';
export function usePointerPosition() {
diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md
index 0281afcec..c3da0c637 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -22,7 +22,7 @@ In this example from [the introduction to reducers](/learn/extracting-state-logi
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -105,7 +105,7 @@ const initialTasks = [
];
```
-```js AddTask.js
+```js src/AddTask.js
import { useState } from 'react';
export default function AddTask({ onAddTask }) {
@@ -126,7 +126,7 @@ export default function AddTask({ onAddTask }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -256,7 +256,7 @@ Export them from a separate file so that you can later import them from other fi
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -339,14 +339,14 @@ const initialTasks = [
];
```
-```js TasksContext.js active
+```js src/TasksContext.js active
import { createContext } from 'react';
export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);
```
-```js AddTask.js
+```js src/AddTask.js
import { useState } from 'react';
export default function AddTask({ onAddTask }) {
@@ -367,7 +367,7 @@ export default function AddTask({ onAddTask }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -474,7 +474,7 @@ For now, you pass the information both via props and in context:
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -560,14 +560,14 @@ const initialTasks = [
];
```
-```js TasksContext.js
+```js src/TasksContext.js
import { createContext } from 'react';
export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);
```
-```js AddTask.js
+```js src/AddTask.js
import { useState } from 'react';
export default function AddTask({ onAddTask }) {
@@ -588,7 +588,7 @@ export default function AddTask({ onAddTask }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -717,7 +717,7 @@ export default function AddTask() {
<Sandpack>
-```js App.js
+```js src/App.js
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -774,14 +774,14 @@ const initialTasks = [
];
```
-```js TasksContext.js
+```js src/TasksContext.js
import { createContext } from 'react';
export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);
```
-```js AddTask.js
+```js src/AddTask.js
import { useState, useContext } from 'react';
import { TasksDispatchContext } from './TasksContext.js';
@@ -810,7 +810,7 @@ export default function AddTask() {
let nextId = 3;
```
-```js TaskList.js active
+```js src/TaskList.js active
import { useState, useContext } from 'react';
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -934,7 +934,7 @@ export function TasksProvider({ children }) {
<Sandpack>
-```js App.js
+```js src/App.js
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
@@ -950,7 +950,7 @@ export default function TaskApp() {
}
```
-```js TasksContext.js
+```js src/TasksContext.js
import { createContext, useReducer } from 'react';
export const TasksContext = createContext(null);
@@ -1005,7 +1005,7 @@ const initialTasks = [
];
```
-```js AddTask.js
+```js src/AddTask.js
import { useState, useContext } from 'react';
import { TasksDispatchContext } from './TasksContext.js';
@@ -1034,7 +1034,7 @@ export default function AddTask() {
let nextId = 3;
```
-```js TaskList.js
+```js src/TaskList.js
import { useState, useContext } from 'react';
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -1144,7 +1144,7 @@ This doesn't change the behavior in any way, but it lets you later split these c
<Sandpack>
-```js App.js
+```js src/App.js
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';
@@ -1160,7 +1160,7 @@ export default function TaskApp() {
}
```
-```js TasksContext.js
+```js src/TasksContext.js
import { createContext, useContext, useReducer } from 'react';
const TasksContext = createContext(null);
@@ -1224,7 +1224,7 @@ const initialTasks = [
];
```
-```js AddTask.js
+```js src/AddTask.js
import { useState } from 'react';
import { useTasksDispatch } from './TasksContext.js';
@@ -1253,7 +1253,7 @@ export default function AddTask() {
let nextId = 3;
```
-```js TaskList.js active
+```js src/TaskList.js active
import { useState } from 'react';
import { useTasks, useTasksDispatch } from './TasksContext.js';
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index a897a602b..21276c287 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
return (
<>
<input value={message} onChange={e => setMessage(e.target.value)} />
- <button onClick={handleSendClick}>Send</button>;
+ <button onClick={handleSendClick}>Send</button>
</>
);
}
@@ -130,7 +130,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function sendMessage(message) {
console.log('π΅ You sent: ' + message);
}
@@ -333,7 +333,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -362,7 +362,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js
+```js src/notifications.js
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -521,7 +521,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -550,7 +550,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js hidden
+```js src/notifications.js hidden
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -1500,7 +1500,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -1529,7 +1529,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js hidden
+```js src/notifications.js hidden
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -1641,7 +1641,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -1670,7 +1670,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js hidden
+```js src/notifications.js hidden
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
@@ -1784,7 +1784,7 @@ export default function App() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection(serverUrl, roomId) {
// A real implementation would actually connect to the server
let connectedCallback;
@@ -1813,7 +1813,7 @@ export function createConnection(serverUrl, roomId) {
}
```
-```js notifications.js hidden
+```js src/notifications.js hidden
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';
diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 149164fe1..52eaf28f8 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -491,7 +491,7 @@ function List({ items }) {
}
```
-```js data.js
+```js src/data.js
export function filterItems(items, query) {
query = query.toLowerCase();
return items.filter(item =>
@@ -584,7 +584,7 @@ function List({ items }) {
}
```
-```js data.js
+```js src/data.js
export function filterItems(items, query) {
query = query.toLowerCase();
return items.filter(item =>
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
index 9c395d3f0..bd5ba6c50 100644
--- a/src/content/learn/start-a-new-react-project.md
+++ b/src/content/learn/start-a-new-react-project.md
@@ -4,27 +4,46 @@ title: Start a New React Project
<Intro>
-If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.
+If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.
</Intro>
-<Note>
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder.
+You can use React without a framework, however weβve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.
-</Note>
+By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later.
+
+<DeepDive>
+
+#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
+
+You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
+
+Here's why.
+
+Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
+
+**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single clientβserver roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
+
+**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own frameworkβalbeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
+
+If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
+
+</DeepDive>
## Production-grade React frameworks {/*production-grade-react-frameworks*/}
-### Next.js {/*nextjs*/}
+These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If youβre a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
-**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
+### Next.js {/*nextjs-pages-router*/}
+
+**[Next.js' Pages Router](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
<TerminalBlock>
npx create-next-app@latest
</TerminalBlock>
-If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs)
+If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn)
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
@@ -64,23 +83,6 @@ If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutor
Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
-<DeepDive>
-
-#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
-
-You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
-
-Here's why.
-
-Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
-
-**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single clientβserver roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
-
-**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own frameworkβalbeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
-
-If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
-</DeepDive>
-
## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/}
As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index cdba8e54a..75a1fd0b9 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -58,7 +58,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -238,7 +238,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -427,7 +427,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -536,7 +536,7 @@ This example **doesn't use React** but it gives you an idea of how `useState` wo
<Sandpack>
-```js index.js active
+```js src/index.js active
let componentHooks = [];
let currentHookIndex = 0;
@@ -750,7 +750,7 @@ export default function Page() {
```
-```js Gallery.js
+```js src/Gallery.js
import { useState } from 'react';
import { sculptureList } from './data.js';
@@ -792,7 +792,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -963,7 +963,7 @@ export default function Gallery() {
}
```
-```js data.js
+```js src/data.js
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
@@ -1125,7 +1125,7 @@ export default function Gallery() {
}
```
-```js data.js hidden
+```js src/data.js hidden
export const sculptureList = [{
name: 'Homenaje a la NeurocirugΓa',
artist: 'Marta Colvin Andrade',
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 7319fdb4f..48e99cc27 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -45,7 +45,7 @@ Here and later in this text, capitalized "Effect" refers to the React-specific d
To write an Effect, follow these three steps:
-1. **Declare an Effect.** By default, your Effect will run after every render.
+1. **Declare an Effect.** By default, your Effect will run after every [commit](/learn/render-and-commit).
2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.*
3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*.
@@ -502,7 +502,7 @@ export default function ChatRoom() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection() {
// A real implementation would actually connect to the server
return {
@@ -560,7 +560,7 @@ export default function ChatRoom() {
}
```
-```js chat.js
+```js src/chat.js
export function createConnection() {
// A real implementation would actually connect to the server
return {
@@ -598,6 +598,33 @@ Usually, the answer is to implement the cleanup function. The cleanup function
Most of the Effects you'll write will fit into one of the common patterns below.
+<Pitfall>
+
+#### Don't use refs to prevent Effects from firing {/*dont-use-refs-to-prevent-effects-from-firing*/}
+
+A common pitfall for preventing Effects firing twice in development is to use a `ref` to prevent the Effect from running more than once. For example, you could "fix" the above bug with a `useRef`:
+
+```js {1,3-4}
+ const connectionRef = useRef(null);
+ useEffect(() => {
+ // π© This wont fix the bug!!!
+ if (!connectionRef.current) {
+ connectionRef.current = createConnection();
+ connectionRef.current.connect();
+ }
+ }, []);
+```
+
+This makes it so you only see `"β
Connecting..."` once in development, but it doesn't fix the bug.
+
+When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix".
+
+To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above.
+
+See the examples below for how to handle common patterns.
+
+</Pitfall>
+
### Controlling non-React widgets {/*controlling-non-react-widgets*/}
Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
@@ -971,7 +998,7 @@ Use the input's [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTM
<Sandpack>
-```js MyInput.js active
+```js src/MyInput.js active
import { useEffect, useRef } from 'react';
export default function MyInput({ value, onChange }) {
@@ -990,7 +1017,7 @@ export default function MyInput({ value, onChange }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import MyInput from './MyInput.js';
@@ -1055,7 +1082,7 @@ To fix the mistake, wrap the `ref.current.focus()` call into an Effect declarati
<Sandpack>
-```js MyInput.js active
+```js src/MyInput.js active
import { useEffect, useRef } from 'react';
export default function MyInput({ value, onChange }) {
@@ -1075,7 +1102,7 @@ export default function MyInput({ value, onChange }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import MyInput from './MyInput.js';
@@ -1139,7 +1166,7 @@ Let's say you want to focus the first field. The first `MyInput` component now r
<Sandpack>
-```js MyInput.js active
+```js src/MyInput.js active
import { useEffect, useRef } from 'react';
export default function MyInput({ shouldFocus, value, onChange }) {
@@ -1160,7 +1187,7 @@ export default function MyInput({ shouldFocus, value, onChange }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import MyInput from './MyInput.js';
@@ -1229,7 +1256,7 @@ Put the conditional logic inside the Effect. You will need to specify `shouldFoc
<Sandpack>
-```js MyInput.js active
+```js src/MyInput.js active
import { useEffect, useRef } from 'react';
export default function MyInput({ shouldFocus, value, onChange }) {
@@ -1251,7 +1278,7 @@ export default function MyInput({ shouldFocus, value, onChange }) {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import MyInput from './MyInput.js';
@@ -1322,7 +1349,7 @@ Keep in mind that `setInterval` returns an interval ID, which you can pass to [`
<Sandpack>
-```js Counter.js active
+```js src/Counter.js active
import { useState, useEffect } from 'react';
export default function Counter() {
@@ -1340,7 +1367,7 @@ export default function Counter() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import Counter from './Counter.js';
@@ -1381,7 +1408,7 @@ To fix this code, save the interval ID returned by `setInterval`, and implement
<Sandpack>
-```js Counter.js active
+```js src/Counter.js active
import { useState, useEffect } from 'react';
export default function Counter() {
@@ -1400,7 +1427,7 @@ export default function Counter() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import Counter from './Counter.js';
@@ -1441,7 +1468,7 @@ This component shows the biography for the selected person. It loads the biograp
<Sandpack>
-```js App.js
+```js src/App.js
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
@@ -1472,7 +1499,7 @@ export default function Page() {
}
```
-```js api.js hidden
+```js src/api.js hidden
export async function fetchBio(person) {
const delay = person === 'Bob' ? 2000 : 200;
return new Promise(resolve => {
@@ -1514,7 +1541,7 @@ To fix this race condition, add a cleanup function:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
@@ -1550,7 +1577,7 @@ export default function Page() {
}
```
-```js api.js hidden
+```js src/api.js hidden
export async function fetchBio(person) {
const delay = person === 'Bob' ? 2000 : 200;
return new Promise(resolve => {
@@ -1573,7 +1600,7 @@ Each render's Effect has its own `ignore` variable. Initially, the `ignore` vari
- Fetching `'Bob'` completes
- The Effect from the `'Bob'` render **does not do anything because its `ignore` flag was set to `true`**
-In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problems.
+In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problem.
</Solution>
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index 23d4beb3f..0f05a0569 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -81,7 +81,7 @@ You can either build "top down" by starting with building the components higher
<Sandpack>
-```jsx App.js
+```jsx src/App.js
function ProductCategoryRow({ category }) {
return (
<tr>
@@ -299,7 +299,7 @@ You can start seeing how your application will behave. Edit the `filterText` ini
<Sandpack>
-```jsx App.js
+```jsx src/App.js
import { useState } from 'react';
function FilterableProductTable({ products }) {
@@ -484,19 +484,33 @@ function FilterableProductTable({ products }) {
Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them:
-```js {5}
-<input
- type="text"
- value={filterText}
- placeholder="Search..."
- onChange={(e) => onFilterTextChange(e.target.value)} />
+```js {4,5,13,19}
+function SearchBar({
+ filterText,
+ inStockOnly,
+ onFilterTextChange,
+ onInStockOnlyChange
+}) {
+ return (
+ <form>
+ <input
+ type="text"
+ value={filterText}
+ placeholder="Search..."
+ onChange={(e) => onFilterTextChange(e.target.value)}
+ />
+ <label>
+ <input
+ type="checkbox"
+ checked={inStockOnly}
+ onChange={(e) => onInStockOnlyChange(e.target.checked)}
```
Now the application fully works!
<Sandpack>
-```jsx App.js
+```jsx src/App.js
import { useState } from 'react';
function FilterableProductTable({ products }) {
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index b40a90572..f18ec4939 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -29,7 +29,7 @@ You can see what it will look like when you're finished here:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -147,7 +147,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -206,13 +206,13 @@ In the live code editor below, click **Fork** in the top-right corner to open th
<Sandpack>
-```js App.js
+```js src/App.js
export default function Square() {
return <button className="square">X</button>;
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -264,7 +264,7 @@ body {
You can also follow this tutorial using your local development environment. To do this, you need to:
1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
+1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **Download Sandbox** in that menu to download an archive of the files locally
1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
1. Install the dependencies with `npm install`
1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
@@ -337,7 +337,7 @@ import './styles.css';
import App from './App';
```
-Lines 1-5 brings all the necessary pieces together:
+Lines 1-5 bring all the necessary pieces together:
* React
* React's library to talk to web browsers (React DOM)
@@ -455,7 +455,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -627,7 +627,7 @@ Your updated code should look like this:
<Sandpack>
-```js App.js
+```js src/App.js
function Square({ value }) {
return <button className="square">{value}</button>;
}
@@ -655,7 +655,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -807,7 +807,7 @@ After you've made the above changes, your code will look like this:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square() {
@@ -850,7 +850,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -988,7 +988,7 @@ And your code should look like this:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value }) {
@@ -1019,7 +1019,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -1228,7 +1228,7 @@ This is what your code should look like:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -1270,7 +1270,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -1422,7 +1422,7 @@ Now you can only add `X`'s or `O`'s to empty squares! Here is what your code sho
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({value, onSquareClick}) {
@@ -1473,7 +1473,7 @@ export default function Board() {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -1524,7 +1524,7 @@ body {
Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
-```js App.js
+```js src/App.js
export default function Board() {
//...
}
@@ -1594,7 +1594,7 @@ Congratulations! You now have a working tic-tac-toe game. And you've just learne
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({value, onSquareClick}) {
@@ -1674,7 +1674,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -1872,7 +1872,7 @@ At this point, you've moved the state to live in the `Game` component, and the U
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -1970,7 +1970,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -2083,7 +2083,7 @@ You'll fix this error in the next section.
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -2199,7 +2199,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -2311,7 +2311,7 @@ const moves = history.map((squares, move) => {
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -2428,7 +2428,7 @@ function calculateWinner(squares) {
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -2532,7 +2532,7 @@ If you click on any step in the game's history, the tic-tac-toe board should imm
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({value, onSquareClick}) {
@@ -2652,7 +2652,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -2742,7 +2742,7 @@ Check out the final result here:
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
function Square({ value, onSquareClick }) {
@@ -2860,7 +2860,7 @@ function calculateWinner(squares) {
}
```
-```css styles.css
+```css src/styles.css
* {
box-sizing: border-box;
}
@@ -2915,4 +2915,4 @@ If you have extra time or want to practice your new React skills, here are some
1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
1. Display the location for each move in the format (row, col) in the move history list.
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when building an app's UI.
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 04c0efc17..7edf8eb6e 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -22,7 +22,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
-- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
+- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
- [Expo](https://docs.expo.dev/guides/typescript/)
@@ -55,7 +55,7 @@ Taking the [`MyButton` component](/learn#components) from the [Quick Start](/lea
<Sandpack>
-```tsx App.tsx active
+```tsx src/App.tsx active
function MyButton({ title }: { title: string }) {
return (
<button>{title}</button>
@@ -72,7 +72,7 @@ export default function MyApp() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import AppTSX from "./App.tsx";
export default App = AppTSX;
```
@@ -88,7 +88,7 @@ This inline syntax is the simplest way to provide types for a component, though
<Sandpack>
-```tsx App.tsx active
+```tsx src/App.tsx active
interface MyButtonProps {
/** The text to display inside the button */
title: string;
@@ -112,7 +112,7 @@ export default function MyApp() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import AppTSX from "./App.tsx";
export default App = AppTSX;
```
@@ -137,7 +137,7 @@ The [`useState` Hook](/reference/react/useState) will re-use the value passed in
const [enabled, setEnabled] = useState(false);
```
-Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
+This will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
```ts
// Explicitly set the type to "boolean"
@@ -170,7 +170,7 @@ The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that
<Sandpack>
-```tsx App.tsx active
+```tsx src/App.tsx active
import {useReducer} from 'react';
interface State {
@@ -213,7 +213,7 @@ export default function App() {
```
-```js App.js hidden
+```js src/App.js hidden
import AppTSX from "./App.tsx";
export default App = AppTSX;
```
@@ -248,7 +248,7 @@ The type of the value provided by the context is inferred from the value passed
<Sandpack>
-```tsx App.tsx active
+```tsx src/App.tsx active
import { createContext, useContext, useState } from 'react';
type Theme = "light" | "dark" | "system";
@@ -277,7 +277,7 @@ function MyComponent() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import AppTSX from "./App.tsx";
export default App = AppTSX;
```
@@ -381,7 +381,7 @@ When working with DOM events in React, the type of the event can often be inferr
<Sandpack>
-```tsx App.tsx active
+```tsx src/App.tsx active
import { useState } from 'react';
export default function Form() {
@@ -400,7 +400,7 @@ export default function Form() {
}
```
-```js App.js hidden
+```js src/App.js hidden
import AppTSX from "./App.tsx";
export default App = AppTSX;
```
@@ -435,7 +435,7 @@ interface ModalRendererProps {
Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.
-You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
### Style Props {/*typing-style-props*/}
@@ -456,7 +456,7 @@ We recommend the following resources:
- [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
- - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
+ - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth.
- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 98f60cea8..2abf7affc 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -22,7 +22,7 @@ React, and many other UI libraries, model UI as a tree. Thinking of your app as
Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React DOM'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM.
</Diagram>
@@ -39,7 +39,7 @@ Here is a React app that renders inspirational quotes.
<Sandpack>
-```js App.js
+```js src/App.js
import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';
@@ -57,7 +57,7 @@ export default function App() {
```
-```js FancyText.js
+```js src/FancyText.js
export default function FancyText({title, text}) {
return title
? <h1 className='fancy title'>{text}</h1>
@@ -65,7 +65,7 @@ export default function FancyText({title, text}) {
}
```
-```js InspirationGenerator.js
+```js src/InspirationGenerator.js
import * as React from 'react';
import quotes from './quotes';
import FancyText from './FancyText';
@@ -86,13 +86,13 @@ export default function InspirationGenerator({children}) {
}
```
-```js Copyright.js
+```js src/Copyright.js
export default function Copyright({year}) {
return <p className='small'>Β©οΈ {year}</p>;
}
```
-```js quotes.js
+```js src/quotes.js
export default [
"Donβt let yesterday take up too much of today.β β Will Rogers",
"Ambition is putting a ladder against the sky.",
@@ -149,7 +149,7 @@ We can update the app to conditionally render either an inspirational quote or c
<Sandpack>
-```js App.js
+```js src/App.js
import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';
@@ -167,7 +167,7 @@ export default function App() {
```
-```js FancyText.js
+```js src/FancyText.js
export default function FancyText({title, text}) {
return title
? <h1 className='fancy title'>{text}</h1>
@@ -175,13 +175,13 @@ export default function FancyText({title, text}) {
}
```
-```js Color.js
+```js src/Color.js
export default function Color({value}) {
return <div className="colorbox" style={{backgroundColor: value}} />
}
```
-```js InspirationGenerator.js
+```js src/InspirationGenerator.js
import * as React from 'react';
import inspirations from './inspirations';
import FancyText from './FancyText';
@@ -206,13 +206,13 @@ export default function InspirationGenerator({children}) {
}
```
-```js Copyright.js
+```js src/Copyright.js
export default function Copyright({year}) {
return <p className='small'>Β©οΈ {year}</p>;
}
```
-```js inspirations.js
+```js src/inspirations.js
export default [
{type: 'quote', value: "Donβt let yesterday take up too much of today.β β Will Rogers"},
{type: 'color', value: "#B73636"},
diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 45c6b70dc..61e4f4e2d 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -409,7 +409,6 @@ For example:
```js
import { useState } from 'react';
-let nextId = 3;
const initialList = [
{ id: 0, title: 'Big Bellies' },
{ id: 1, title: 'Lunar Landscape' },
@@ -1084,7 +1083,7 @@ In this example, all of the event handlers in `App.js` use mutation. As a result
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';
@@ -1139,7 +1138,7 @@ export default function TaskApp() {
}
```
-```js AddTodo.js
+```js src/AddTodo.js
import { useState } from 'react';
export default function AddTodo({ onAddTodo }) {
@@ -1160,7 +1159,7 @@ export default function AddTodo({ onAddTodo }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -1247,7 +1246,7 @@ In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`,
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';
@@ -1306,7 +1305,7 @@ export default function TaskApp() {
}
```
-```js AddTodo.js
+```js src/AddTodo.js
import { useState } from 'react';
export default function AddTodo({ onAddTodo }) {
@@ -1327,7 +1326,7 @@ export default function AddTodo({ onAddTodo }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -1417,7 +1416,7 @@ This is the same example as in the previous challenge. This time, fix the mutati
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { useImmer } from 'use-immer';
import AddTodo from './AddTodo.js';
@@ -1473,7 +1472,7 @@ export default function TaskApp() {
}
```
-```js AddTodo.js
+```js src/AddTodo.js
import { useState } from 'react';
export default function AddTodo({ onAddTodo }) {
@@ -1494,7 +1493,7 @@ export default function AddTodo({ onAddTodo }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -1599,7 +1598,7 @@ With Immer, you can write code in the mutative fashion, as long as you're only m
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { useImmer } from 'use-immer';
import AddTodo from './AddTodo.js';
@@ -1661,7 +1660,7 @@ export default function TaskApp() {
}
```
-```js AddTodo.js
+```js src/AddTodo.js
import { useState } from 'react';
export default function AddTodo({ onAddTodo }) {
@@ -1682,7 +1681,7 @@ export default function AddTodo({ onAddTodo }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
@@ -1787,7 +1786,7 @@ For example, in this version `handleAddTodo` is implemented by mutating the Imme
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { useImmer } from 'use-immer';
import AddTodo from './AddTodo.js';
@@ -1846,7 +1845,7 @@ export default function TaskApp() {
}
```
-```js AddTodo.js
+```js src/AddTodo.js
import { useState } from 'react';
export default function AddTodo({ onAddTodo }) {
@@ -1867,7 +1866,7 @@ export default function AddTodo({ onAddTodo }) {
}
```
-```js TaskList.js
+```js src/TaskList.js
import { useState } from 'react';
export default function TaskList({
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 9289f2454..923e4e181 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -986,7 +986,7 @@ If something unexpected changes, there is a mutation. Find the mutation in `App.
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Background from './Background.js';
import Box from './Box.js';
@@ -1039,7 +1039,7 @@ export default function Canvas() {
}
```
-```js Box.js
+```js src/Box.js
import { useState } from 'react';
export default function Box({
@@ -1102,7 +1102,7 @@ export default function Box({
}
```
-```js Background.js
+```js src/Background.js
export default function Background({
position
}) {
@@ -1136,7 +1136,7 @@ The fix is to remove the mutation from `handleMove`, and use the spread syntax t
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import Background from './Background.js';
import Box from './Box.js';
@@ -1194,7 +1194,7 @@ export default function Canvas() {
}
```
-```js Box.js
+```js src/Box.js
import { useState } from 'react';
export default function Box({
@@ -1257,7 +1257,7 @@ export default function Box({
}
```
-```js Background.js
+```js src/Background.js
export default function Background({
position
}) {
@@ -1291,7 +1291,7 @@ This is the same buggy example as in the previous challenge. This time, fix the
<Sandpack>
-```js App.js
+```js src/App.js
import { useState } from 'react';
import { useImmer } from 'use-immer';
import Background from './Background.js';
@@ -1345,7 +1345,7 @@ export default function Canvas() {
}
```
-```js Box.js
+```js src/Box.js
import { useState } from 'react';
export default function Box({
@@ -1408,7 +1408,7 @@ export default function Box({
}
```
-```js Background.js
+```js src/Background.js
export default function Background({
position
}) {
@@ -1458,7 +1458,7 @@ This is the solution rewritten with Immer. Notice how the event handlers are wri
<Sandpack>
-```js App.js
+```js src/App.js
import { useImmer } from 'use-immer';
import Background from './Background.js';
import Box from './Box.js';
@@ -1512,7 +1512,7 @@ export default function Canvas() {
}
```
-```js Box.js
+```js src/Box.js
import { useState } from 'react';
export default function Box({
@@ -1575,7 +1575,7 @@ export default function Box({
}
```
-```js Background.js
+```js src/Background.js
export default function Background({
position
}) {
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index a3b33d3a7..66cdc3117 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -882,7 +882,7 @@ function NewTodo({ onAdd }) {
}
```
-```js todos.js
+```js src/todos.js
let nextId = 0;
export function createTodo(text, completed = false) {
@@ -975,7 +975,7 @@ function NewTodo({ onAdd }) {
}
```
-```js todos.js
+```js src/todos.js
let nextId = 0;
export function createTodo(text, completed = false) {
@@ -1061,7 +1061,7 @@ export default function TodoList() {
}
```
-```js todos.js
+```js src/todos.js
let nextId = 0;
let calls = 0;
@@ -1144,7 +1144,7 @@ export default function TodoList() {
}
```
-```js todos.js
+```js src/todos.js
let nextId = 0;
let calls = 0;
@@ -1233,7 +1233,7 @@ function NewTodo({ onAdd }) {
}
```
-```js todos.js
+```js src/todos.js
let nextId = 0;
let calls = 0;
@@ -1278,7 +1278,7 @@ When you select a contact with the buttons at the top, the form resets to reflec
<Sandpack>
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import ContactList from './ContactList.js';
import EditContact from './EditContact.js';
@@ -1330,7 +1330,7 @@ const initialContacts = [
];
```
-```js ContactList.js hidden
+```js src/ContactList.js hidden
export default function ContactList({
contacts,
selectedId,
@@ -1357,7 +1357,7 @@ export default function ContactList({
}
```
-```js EditContact.js active
+```js src/EditContact.js active
import { useState, useEffect } from 'react';
export default function EditContact({ savedContact, onSave }) {
@@ -1442,7 +1442,7 @@ Split the `EditContact` component in two. Move all the form state into the inner
<Sandpack>
-```js App.js hidden
+```js src/App.js hidden
import { useState } from 'react';
import ContactList from './ContactList.js';
import EditContact from './EditContact.js';
@@ -1494,7 +1494,7 @@ const initialContacts = [
];
```
-```js ContactList.js hidden
+```js src/ContactList.js hidden
export default function ContactList({
contacts,
selectedId,
@@ -1521,7 +1521,7 @@ export default function ContactList({
}
```
-```js EditContact.js active
+```js src/EditContact.js active
import { useState } from 'react';
export default function EditContact(props) {
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index d91bc20c6..b336b6e5e 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,7 +45,9 @@ An app fully built with React will usually only have one `createRoot` call for i
* **optional** `options`: An object with options for this React root.
- * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+ * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
#### Returns {/*returns*/}
@@ -153,7 +155,7 @@ Usually, you only need to run this code once at startup. It will:
</html>
```
-```js index.js active
+```js src/index.js active
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';
@@ -162,7 +164,7 @@ const root = createRoot(document.getElementById('root'));
root.render(<App />);
```
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -232,7 +234,7 @@ Here, two different React components are rendered into two DOM nodes defined in
</html>
```
-```js index.js active
+```js src/index.js active
import './styles.css';
import { createRoot } from 'react-dom/client';
import { Comments, Navigation } from './Components.js';
@@ -246,7 +248,7 @@ const commentRoot = createRoot(commentDomNode);
commentRoot.render(<Comments />);
```
-```js Components.js
+```js src/Components.js
export function Navigation() {
return (
<ul>
@@ -313,7 +315,7 @@ You can call `render` more than once on the same root. As long as the component
<Sandpack>
-```js index.js active
+```js src/index.js active
import { createRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';
@@ -327,7 +329,7 @@ setInterval(() => {
}, 1000);
```
-```js App.js
+```js src/App.js
export default function App({counter}) {
return (
<>
@@ -342,6 +344,797 @@ export default function App({counter}) {
It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead.
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+<Canary>
+
+`onUncaughtError` is only available in the latest React Canary release.
+
+</Canary>
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+ document.getElementById('root'),
+ {
+ onUncaughtError: (error, errorInfo) => {
+ console.error(
+ 'Uncaught error',
+ error,
+ errorInfo.componentStack
+ );
+ }
+ }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+ <title>My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
+
+
+
+
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorTitle = document.getElementById("error-title");
+ const errorMessage = document.getElementById("error-message");
+ const errorBody = document.getElementById("error-body");
+ const errorComponentStack = document.getElementById("error-component-stack");
+ const errorStack = document.getElementById("error-stack");
+ const errorClose = document.getElementById("error-close");
+ const errorCause = document.getElementById("error-cause");
+ const errorCauseMessage = document.getElementById("error-cause-message");
+ const errorCauseStack = document.getElementById("error-cause-stack");
+ const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+ // Set the title
+ errorTitle.innerText = title;
+
+ // Display error message and body
+ const [heading, body] = error.message.split(/\n(.*)/s);
+ errorMessage.innerText = heading;
+ if (body) {
+ errorBody.innerText = body;
+ } else {
+ errorBody.innerText = '';
+ }
+
+ // Display component stack
+ errorComponentStack.innerText = componentStack;
+
+ // Display the call stack
+ // Since we already displayed the message, strip it, and the first Error: line.
+ errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+ // Display the cause, if available
+ if (error.cause) {
+ errorCauseMessage.innerText = error.cause.message;
+ errorCauseStack.innerText = error.cause.stack;
+ errorCause.classList.remove('hidden');
+ } else {
+ errorCause.classList.add('hidden');
+ }
+ // Display the close button, if dismissible
+ if (dismissable) {
+ errorNotDismissible.classList.add('hidden');
+ errorClose.classList.remove("hidden");
+ } else {
+ errorNotDismissible.classList.remove('hidden');
+ errorClose.classList.add("hidden");
+ }
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+ reportError({ title: "Caught Error", error, componentStack, dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+ reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+ reportError({ title: "Recoverable Error", error, componentStack, dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+ onUncaughtError: (error, errorInfo) => {
+ if (error.message !== 'Known error') {
+ reportUncaughtError({
+ error,
+ componentStack: errorInfo.componentStack
+ });
+ }
+ }
+});
+root.render(
);
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+ const [throwError, setThrowError] = useState(false);
+
+ if (throwError) {
+ foo.bar = 'baz';
+ }
+
+ return (
+
+ This error shows the error dialog:
+ setThrowError(true)}>
+ Throw error
+
+
+ );
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0"
+ },
+ "main": "/index.js"
+}
+```
+
+
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+
+
+`onCaughtError` is only available in the latest React Canary release.
+
+
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+ document.getElementById('root'),
+ {
+ onCaughtError: (error, errorInfo) => {
+ console.error(
+ 'Caught error',
+ error,
+ errorInfo.componentStack
+ );
+ }
+ }
+);
+root.render(
);
+```
+
+The
onCaughtError option is a function called with two arguments:
+
+1. The
error that was caught by the boundary.
+2. An
errorInfo object that contains the
componentStack of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+
+
+```html index.html hidden
+
+
+
+ My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
+
+
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorTitle = document.getElementById("error-title");
+ const errorMessage = document.getElementById("error-message");
+ const errorBody = document.getElementById("error-body");
+ const errorComponentStack = document.getElementById("error-component-stack");
+ const errorStack = document.getElementById("error-stack");
+ const errorClose = document.getElementById("error-close");
+ const errorCause = document.getElementById("error-cause");
+ const errorCauseMessage = document.getElementById("error-cause-message");
+ const errorCauseStack = document.getElementById("error-cause-stack");
+ const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+ // Set the title
+ errorTitle.innerText = title;
+
+ // Display error message and body
+ const [heading, body] = error.message.split(/\n(.*)/s);
+ errorMessage.innerText = heading;
+ if (body) {
+ errorBody.innerText = body;
+ } else {
+ errorBody.innerText = '';
+ }
+
+ // Display component stack
+ errorComponentStack.innerText = componentStack;
+
+ // Display the call stack
+ // Since we already displayed the message, strip it, and the first Error: line.
+ errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+ // Display the cause, if available
+ if (error.cause) {
+ errorCauseMessage.innerText = error.cause.message;
+ errorCauseStack.innerText = error.cause.stack;
+ errorCause.classList.remove('hidden');
+ } else {
+ errorCause.classList.add('hidden');
+ }
+ // Display the close button, if dismissible
+ if (dismissable) {
+ errorNotDismissible.classList.add('hidden');
+ errorClose.classList.remove("hidden");
+ } else {
+ errorNotDismissible.classList.remove('hidden');
+ errorClose.classList.add("hidden");
+ }
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+ reportError({ title: "Caught Error", error, componentStack, dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+ reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+ reportError({ title: "Recoverable Error", error, componentStack, dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+ onCaughtError: (error, errorInfo) => {
+ if (error.message !== 'Known error') {
+ reportCaughtError({
+ error,
+ componentStack: errorInfo.componentStack,
+ });
+ }
+ }
+});
+root.render( {
+ setError(null);
+ }}
+ >
+ {error != null && This error will not show the error dialog:
+
+ Throw known error
+
+ This error will show the error dialog:
+
+ Throw unknown error
+
+
+
+
+ );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+ return (
+
+
Error Boundary
+
Something went wrong.
+
Reset
+
+
+### Displaying a dialog for recoverable errors {/*displaying-a-dialog-for-recoverable-errors*/}
+
+React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 6, "onRecoverableError"], [2, 6, "error", 1], [3, 10, "error.cause"], [4, 6, "errorInfo"], [5, 11, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+ document.getElementById('root'),
+ {
+ onRecoverableError: (error, errorInfo) => {
+ console.error(
+ 'Recoverable error',
+ error,
+ error.cause,
+ errorInfo.componentStack,
+ );
+ }
+ }
+);
+root.render(
);
+```
+
+The
onRecoverableError option is a function called with two arguments:
+
+1. The
error that React throws. Some errors may include the original cause as
error.cause .
+2. An
errorInfo object that contains the
componentStack of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs:
+
+
+
+```html index.html hidden
+
+
+
+ My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
+
+
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorTitle = document.getElementById("error-title");
+ const errorMessage = document.getElementById("error-message");
+ const errorBody = document.getElementById("error-body");
+ const errorComponentStack = document.getElementById("error-component-stack");
+ const errorStack = document.getElementById("error-stack");
+ const errorClose = document.getElementById("error-close");
+ const errorCause = document.getElementById("error-cause");
+ const errorCauseMessage = document.getElementById("error-cause-message");
+ const errorCauseStack = document.getElementById("error-cause-stack");
+ const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+ // Set the title
+ errorTitle.innerText = title;
+
+ // Display error message and body
+ const [heading, body] = error.message.split(/\n(.*)/s);
+ errorMessage.innerText = heading;
+ if (body) {
+ errorBody.innerText = body;
+ } else {
+ errorBody.innerText = '';
+ }
+
+ // Display component stack
+ errorComponentStack.innerText = componentStack;
+
+ // Display the call stack
+ // Since we already displayed the message, strip it, and the first Error: line.
+ errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+ // Display the cause, if available
+ if (error.cause) {
+ errorCauseMessage.innerText = error.cause.message;
+ errorCauseStack.innerText = error.cause.stack;
+ errorCause.classList.remove('hidden');
+ } else {
+ errorCause.classList.add('hidden');
+ }
+ // Display the close button, if dismissible
+ if (dismissable) {
+ errorNotDismissible.classList.add('hidden');
+ errorClose.classList.remove("hidden");
+ } else {
+ errorNotDismissible.classList.remove('hidden');
+ errorClose.classList.add("hidden");
+ }
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+ reportError({ title: "Caught Error", error, componentStack, dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+ reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+ reportError({ title: "Recoverable Error", error, componentStack, dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+ onRecoverableError: (error, errorInfo) => {
+ reportRecoverableError({
+ error,
+ cause: error.cause,
+ componentStack: errorInfo.componentStack,
+ });
+ }
+});
+root.render(
+ {!errorThrown && This component threw an error, but recovered during a second render.
+ Since it recovered, no Error Boundary was shown, but onRecoverableError was used to show an error dialog.
+
+
+
+ );
+}
+
+function fallbackRender() {
+ return (
+
+
Error Boundary
+
Something went wrong.
+
+
+
---
## Troubleshooting {/*troubleshooting*/}
@@ -361,6 +1154,28 @@ Until you do that, nothing is displayed.
---
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `createRoot` to `root.render(...)`:
+
+
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+
+
+To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// π© Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// β
Correct: pass options to createRoot.
+const root = createRoot(container, {onUncaughtError});
+root.render(
);
+```
+
+---
+
### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
This error means that whatever you're passing to `createRoot` is not a DOM node.
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cf77a81ac..cc30ce22c 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,7 +41,9 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
* **optional** `options`: An object with options for this React root.
- * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+ *
**optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ *
**optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
@@ -143,7 +145,7 @@ To hydrate your app, React will "attach" your components' logic to the initial g
Hello, world! You clicked me 0 times
```
-```js index.js active
+```js src/index.js active
import './styles.css';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
@@ -154,7 +156,7 @@ hydrateRoot(
);
```
-```js App.js
+```js src/App.js
import { useState } from 'react';
export default function App() {
@@ -248,7 +250,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
Current Date: 01/01/2020
```
-```js index.js
+```js src/index.js
import './styles.css';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
@@ -256,7 +258,7 @@ import App from './App.js';
hydrateRoot(document.getElementById('root'),
);
```
-```js App.js active
+```js src/App.js active
export default function App() {
return (
@@ -286,7 +288,7 @@ If you intentionally need to render something different on the server and the cl
Is Server
```
-```js index.js
+```js src/index.js
import './styles.css';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
@@ -294,7 +296,7 @@ import App from './App.js';
hydrateRoot(document.getElementById('root'),
Hello, world! 0
+
+`onUncaughtError` is only available in the latest React Canary release.
+
+
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+ document.getElementById('root'),
+ onUncaughtError option is a function called with two arguments:
+
+1. The error that was thrown.
+2. An errorInfo object that contains the componentStack of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+
+
+```html index.html hidden
+
+
+
+ My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
This error shows the error dialog: Throw error
+ This error shows the error dialog:
+ setThrowError(true)}>
+ Throw error
+
+
+ );
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0"
+ },
+ "main": "/index.js"
+}
+```
+
+
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+
+
+`onCaughtError` is only available in the latest React Canary release.
+
+
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+ document.getElementById('root'),
+ onCaughtError option is a function called with two arguments:
+
+1. The error that was caught by the boundary.
+2. An errorInfo object that contains the componentStack of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+
+
+```html index.html hidden
+
+
+
+ My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
This error will not show the error dialog: Throw known error This error will show the error dialog: Throw unknown error
+
+
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorTitle = document.getElementById("error-title");
+ const errorMessage = document.getElementById("error-message");
+ const errorBody = document.getElementById("error-body");
+ const errorComponentStack = document.getElementById("error-component-stack");
+ const errorStack = document.getElementById("error-stack");
+ const errorClose = document.getElementById("error-close");
+ const errorCause = document.getElementById("error-cause");
+ const errorCauseMessage = document.getElementById("error-cause-message");
+ const errorCauseStack = document.getElementById("error-cause-stack");
+ const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+ // Set the title
+ errorTitle.innerText = title;
+
+ // Display error message and body
+ const [heading, body] = error.message.split(/\n(.*)/s);
+ errorMessage.innerText = heading;
+ if (body) {
+ errorBody.innerText = body;
+ } else {
+ errorBody.innerText = '';
+ }
+
+ // Display component stack
+ errorComponentStack.innerText = componentStack;
+
+ // Display the call stack
+ // Since we already displayed the message, strip it, and the first Error: line.
+ errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+ // Display the cause, if available
+ if (error.cause) {
+ errorCauseMessage.innerText = error.cause.message;
+ errorCauseStack.innerText = error.cause.stack;
+ errorCause.classList.remove('hidden');
+ } else {
+ errorCause.classList.add('hidden');
+ }
+ // Display the close button, if dismissible
+ if (dismissable) {
+ errorNotDismissible.classList.add('hidden');
+ errorClose.classList.remove("hidden");
+ } else {
+ errorNotDismissible.classList.remove('hidden');
+ errorClose.classList.add("hidden");
+ }
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+ reportError({ title: "Caught Error", error, componentStack, dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+ reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+ reportError({ title: "Recoverable Error", error, componentStack, dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, {
+ setError(null);
+ }}
+ >
+ {error != null && This error will not show the error dialog:
+
+ Throw known error
+
+ This error will show the error dialog:
+
+ Throw unknown error
+
+
+
+
+ );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+ return (
+
+
Error Boundary
+
Something went wrong.
+
Reset
+
+
+### Show a dialog for recoverable hydration mismatch errors {/*show-a-dialog-for-recoverable-hydration-mismatch-errors*/}
+
+When React encounters a hydration mismatch, it will automatically attempt to recover by rendering on the client. By default, React will log hydration mismatch errors to `console.error`. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 7, "onRecoverableError"], [2, 7, "error", 1], [3, 11, "error.cause", 1], [4, 7, "errorInfo"], [5, 12, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+ document.getElementById('root'),
+ onRecoverableError option is a function called with two arguments:
+
+1. The error React throws. Some errors may include the original cause as error.cause .
+2. An errorInfo object that contains the componentStack of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
+
+
+
+```html index.html hidden
+
+
+
+ My app
+
+
+
+
+
+
+
+
+
+
+
This error occurred at:
+
+
Call stack:
+
+
+
+ Close
+
+
This error is not dismissible.
+
Server
+
+
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorTitle = document.getElementById("error-title");
+ const errorMessage = document.getElementById("error-message");
+ const errorBody = document.getElementById("error-body");
+ const errorComponentStack = document.getElementById("error-component-stack");
+ const errorStack = document.getElementById("error-stack");
+ const errorClose = document.getElementById("error-close");
+ const errorCause = document.getElementById("error-cause");
+ const errorCauseMessage = document.getElementById("error-cause-message");
+ const errorCauseStack = document.getElementById("error-cause-stack");
+ const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+ // Set the title
+ errorTitle.innerText = title;
+
+ // Display error message and body
+ const [heading, body] = error.message.split(/\n(.*)/s);
+ errorMessage.innerText = heading;
+ if (body) {
+ errorBody.innerText = body;
+ } else {
+ errorBody.innerText = '';
+ }
+
+ // Display component stack
+ errorComponentStack.innerText = componentStack;
+
+ // Display the call stack
+ // Since we already displayed the message, strip it, and the first Error: line.
+ errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+ // Display the cause, if available
+ if (error.cause) {
+ errorCauseMessage.innerText = error.cause.message;
+ errorCauseStack.innerText = error.cause.stack;
+ errorCause.classList.remove('hidden');
+ } else {
+ errorCause.classList.add('hidden');
+ }
+ // Display the close button, if dismissible
+ if (dismissable) {
+ errorNotDismissible.classList.add('hidden');
+ errorClose.classList.remove("hidden");
+ } else {
+ errorNotDismissible.classList.remove('hidden');
+ errorClose.classList.add("hidden");
+ }
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+ reportError({ title: "Caught Error", error, componentStack, dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+ reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+ reportError({ title: "Recoverable Error", error, componentStack, dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, {typeof window !== 'undefined' ? 'Client' : 'Server'}
+ );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+ return (
+
+
Error Boundary
+
Something went wrong.
+
Reset
+
+
+## Troubleshooting {/*troubleshooting*/}
+
+
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `hydrateRoot` to `root.render(...)`:
+
+
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+
+
+To fix, pass the root options to `hydrateRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// π© Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// β
Correct: pass options to createRoot.
+const root = hydrateRoot(container,
#### Returns {/*returns*/}
-Do not return anything from the `ref` callback.
+* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached.
+
+```js
+
+ {
+ console.log(node);
+
+ return () => {
+ console.log('Clean up', node)
+ }
+}}>
+
+```
+
+#### Caveats {/*caveats*/}
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
+* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
+
+
---
@@ -771,7 +792,7 @@ In the above example, `style={{}}` is not a special syntax, but a regular `{}` o
-```js App.js
+```js src/App.js
import Avatar from './Avatar.js';
const user = {
@@ -785,7 +806,7 @@ export default function App() {
}
```
-```js Avatar.js active
+```js src/Avatar.js active
export default function Avatar({ user }) {
return (
`.
+
To see why rendering arbitrary HTML is dangerous, replace the code above with this:
```js {1-4,7,8}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 25d1ba4e9..8f6ab00e0 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -5,7 +5,7 @@ canary: true
-React's extensions to `
@@ -62,7 +62,7 @@ Pass a function to the `action` prop of form to run the function when the form i
-```js App.js
+```js src/App.js
export default function Search() {
function search(formData) {
const query = formData.get("query");
@@ -93,7 +93,7 @@ export default function Search() {
### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/}
-Render a `