From 15299e57d377ec0cd9e2e6f68539fc5784b4c769 Mon Sep 17 00:00:00 2001 From: "Nabeel A." Date: Wed, 8 Jul 2026 20:22:45 +0500 Subject: [PATCH 01/11] Fix startTransition example to wrap setState after await (#8520) --- src/content/reference/rsc/server-functions.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 34ef4c00..9e406d91 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -126,11 +126,13 @@ function UpdateName() { const submitAction = async () => { startTransition(async () => { const {error} = await updateName(name); - if (error) { - setError(error); - } else { - setName(''); - } + startTransition(() => { + if (error) { + setError(error); + } else { + setName(''); + } + }); }) } From 831150c73f5c02ffbc8d66437ce00c76eddfbb2b Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Wed, 8 Jul 2026 19:40:56 +0200 Subject: [PATCH 02/11] [use] Rework await vs use DeepDive to fix inaccurate framing (#8521) * Clarify use vs await * Refine based on feedback * Address review comments --- src/content/reference/react/use.md | 34 ++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 1780f82e..6e2d490e 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -1113,47 +1113,59 @@ root.render( #### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/} -A Promise can be resolved with `await` in a Server Component, or passed as a prop to a Client Component and resolved there with `use`. +If you have a Promise, at some point you need to unwrap it to read its value. You unwrap it with `await` in a Server Component, and with `use` in a Client Component. -Using `await` in a Server Component suspends the Server Component itself, and the Client Component receives the resolved value as a prop: +Usually, the simplest option is to `await` the Promise where you create it. The Server Component suspends until the data is ready, and everything below it waits too: ```js // Server Component export default async function App() { - // Will suspend the Server Component. const messageContent = await fetchMessage(); return ; } ``` -A Server Component can also start a Promise without awaiting it and pass the Promise to a Client Component. The Server Component returns immediately, and the Client Component suspends when it calls `use`: +However, you don't have to unwrap it right away. You can pass the Promise down as a prop, and unwrap it deeper in the tree. The component that reads the Promise still suspends, but only that part of the tree waits for the data. Wrap that component in a [``](/reference/react/Suspense) boundary to show a fallback while the rest of the page renders immediately. + +For example, a deeper Server Component can `await` the Promise it receives: ```js +import { Suspense } from 'react'; + // Server Component export default function App() { - // Not awaited: starts here, resolves on the client. const messagePromise = fetchMessage(); - return ; + return ( + ⌛Downloading message...

}> + +
+ ); +} + +// Server Component +async function Message({ messagePromise }) { + const messageContent = await messagePromise; + return

{messageContent}

; } ``` +Or, in a separate file, a Client Component can unwrap the same Promise with `use`: + ```js // Client Component 'use client'; + import { use } from 'react'; export function Message({ messagePromise }) { - // Will suspend until the data is available. const messageContent = use(messagePromise); return

{messageContent}

; } ``` -Prefer `await` in a Server Component when possible, since it keeps the data fetching on the server. If a Server Component above already awaits the data, pass the resolved value down as a prop instead of creating a new Promise to call `use`. - -You can also pass promise as a prop to a Client Component without awaiting it, and then read it with `use(promise)` to suspend deeper in the tree. This allows more of the surrounding UI to complete while the Promise is pending. A common case is interactive content like popovers and tooltips, where the data is needed only after a hover or click. Client Components can't `await`, so they rely on `use` to suspend on a Promise. +Passing the Promise down works the same way in both cases. Both suspend where the Promise is read, and both unblock the UI above. The only difference is that Client Components can't `await` during render, so they unwrap the Promise with `use` instead. A common case is interactive content like popovers and tooltips, where the data is only needed after a hover or click. -In either case, wrap the component that reads the Promise in a Suspense boundary so React can show a fallback while the Promise is pending. See [Revealing content together at once](/reference/react/Suspense#revealing-content-together-at-once) for guidance on boundary placement. +See [Revealing content together at once](/reference/react/Suspense#revealing-content-together-at-once) for guidance on where to place Suspense boundaries. From e99866401820a8554b61f7295464731bc83c7a0d Mon Sep 17 00:00:00 2001 From: TunaDev <198469603+TunaDev0@users.noreply.github.com> Date: Wed, 8 Jul 2026 22:34:03 +0200 Subject: [PATCH 03/11] Fix slow demo preview height (#8517) Co-authored-by: Tuna --- src/content/reference/react/useDeferredValue.md | 4 ++++ src/content/reference/react/useTransition.md | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index 40cb9262..6d883877 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -706,6 +706,8 @@ export default SlowList; ```css .items { padding: 0; + max-height: 300px; + overflow: auto; } .item { @@ -783,6 +785,8 @@ export default SlowList; ```css .items { padding: 0; + max-height: 300px; + overflow: auto; } .item { diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 426df1f7..472224e5 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -736,6 +736,10 @@ export default function ContactTab() { button { margin-right: 10px } b { display: inline-block; margin-right: 10px; } .pending { color: #777; } +.items { + max-height: 300px; + overflow: auto; +} ``` @@ -891,6 +895,10 @@ export default function ContactTab() { button { margin-right: 10px } b { display: inline-block; margin-right: 10px; } .pending { color: #777; } +.items { + max-height: 300px; + overflow: auto; +} ``` From c3c956bef083142ea94dd04068b389195db98dad Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Thu, 9 Jul 2026 13:43:35 +0200 Subject: [PATCH 04/11] Update React repo owner (#8524) --- .claude/skills/docs-writer-blog/SKILL.md | 8 +- .claude/skills/react-expert/SKILL.md | 16 +- .github/ISSUE_TEMPLATE/config.yml | 2 +- .github/workflows/discord_notify.yml | 2 +- .github/workflows/label_core_team_prs.yml | 2 +- scripts/deadLinkChecker.js | 2 +- src/components/Layout/Footer.tsx | 4 +- src/components/Layout/TopNav/TopNav.tsx | 2 +- .../MDX/Sandpack/DownloadButton.tsx | 2 +- .../blog/2021/06/08/the-plan-for-react-18.md | 2 +- .../blog/2022/03/08/react-18-upgrade-guide.md | 8 +- src/content/blog/2022/03/29/react-v18.md | 114 ++++---- ...-what-we-have-been-working-on-june-2022.md | 2 +- .../blog/2024/04/25/react-19-upgrade-guide.md | 34 +-- .../blog/2024/05/22/react-conf-2024-recap.md | 2 +- .../2024/10/21/react-compiler-beta-release.md | 4 +- src/content/blog/2024/12/05/react-19.md | 2 +- ...labs-view-transitions-activity-and-more.md | 2 +- src/content/blog/2025/10/01/react-19-2.md | 32 +-- .../blog/2025/10/07/react-compiler-1.md | 2 +- ...ulnerability-in-react-server-components.md | 4 +- ...ode-exposure-in-react-server-components.md | 2 +- src/content/blog/index.md | 2 +- src/content/community/acknowledgements.md | 2 +- src/content/community/index.md | 2 +- src/content/community/versioning-policy.md | 4 +- src/content/learn/react-compiler/debugging.md | 4 +- .../learn/react-compiler/installation.md | 2 +- .../lints/incompatible-library.md | 4 +- .../reference/react-dom/components/common.md | 2 +- .../server/renderToPipeableStream.md | 2 +- .../server/renderToReadableStream.md | 2 +- .../reference/react-dom/static/prerender.md | 2 +- .../react-dom/static/prerenderToNodeStream.md | 2 +- src/content/versions.md | 250 +++++++++--------- src/content/warnings/invalid-aria-prop.md | 2 +- .../warnings/invalid-hook-call-warning.md | 4 +- src/pages/errors/[errorCode].tsx | 4 +- src/siteConfig.js | 2 +- vercel.json | 4 +- 40 files changed, 273 insertions(+), 273 deletions(-) diff --git a/.claude/skills/docs-writer-blog/SKILL.md b/.claude/skills/docs-writer-blog/SKILL.md index ef28225f..baa21c34 100644 --- a/.claude/skills/docs-writer-blog/SKILL.md +++ b/.claude/skills/docs-writer-blog/SKILL.md @@ -159,7 +159,7 @@ See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for s ### React {/*react*/} -* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor)) +* Add `useNewHook` for [purpose]. ([#12345](https://github.com/react/react/pull/12345) by [@contributor](https://github.com/contributor)) --- @@ -603,7 +603,7 @@ npm install react@latest react-dom@latest | Type | Pattern | |------|---------| -| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` | +| GitHub PR | `[#12345](https://github.com/react/react/pull/12345)` | | GitHub user | `[@username](https://github.com/username)` | | Twitter/X | `[@username](https://x.com/username)` | | Bluesky | `[Name](https://bsky.app/profile/handle)` | @@ -623,8 +623,8 @@ For more information, see the docs for [`useActionState`](/reference/react/useAc ### Bullet Pattern ```markdown -* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/facebook/react/pull/10426) by [@acdlite](https://github.com/acdlite)) -* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/react/react/pull/10426) by [@acdlite](https://github.com/acdlite)) +* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) ``` **Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))` diff --git a/.claude/skills/react-expert/SKILL.md b/.claude/skills/react-expert/SKILL.md index 5ebcdee3..c252f6ce 100644 --- a/.claude/skills/react-expert/SKILL.md +++ b/.claude/skills/react-expert/SKILL.md @@ -32,7 +32,7 @@ This skill produces exhaustive documentation research on any React API or concep 2. **React Source Code** - Warnings, errors, implementation details 3. **Git History** - Commit messages with context 4. **GitHub PRs & Comments** - Design rationale (via `gh` CLI) -5. **GitHub Issues** - Confusion/questions (facebook/react + reactjs/react.dev) +5. **GitHub Issues** - Confusion/questions (react/react + reactjs/react.dev) 6. **React Working Group** - Design discussions for newer APIs 7. **Flow Types** - Source of truth for type signatures 8. **TypeScript Types** - Note discrepancies with Flow @@ -51,7 +51,7 @@ First, ensure the React repo is available locally: if [ -d ".claude/react" ]; then cd .claude/react && git pull origin main else - git clone --depth=100 https://github.com/facebook/react.git .claude/react + git clone --depth=100 https://github.com/react/react.git .claude/react fi ``` @@ -71,8 +71,8 @@ Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skep | test-explorer | Explore | Test files for usage patterns | Search `.claude/react/packages/*/src/__tests__/` for test files mentioning the topic. Extract actual usage examples WITH file paths and line numbers. | | source-explorer | Explore | Warnings/errors in source | Search `.claude/react/packages/*/src/` for console.error, console.warn, and error messages mentioning the topic. Document trigger conditions. | | git-historian | Explore | Commit messages | Run `git log --all --grep="" --oneline -50` in `.claude/react`. Read full commit messages for context. | -| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R facebook/react --search "" --state all --limit 20`. Read key PR descriptions and comments. | -| issue-hunter | Explore | Issues showing confusion | Search issues in both `facebook/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. | +| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R react/react --search "" --state all --limit 20`. Read key PR descriptions and comments. | +| issue-hunter | Explore | Issues showing confusion | Search issues in both `react/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. | | types-inspector | Explore | Flow + TypeScript signatures | Find Flow types in `.claude/react/packages/*/src/*.js` (look for `@flow` annotations). Find TS types in `.claude/react/packages/*/index.d.ts`. Note discrepancies. | ### Step 3: Agent Prompts @@ -164,8 +164,8 @@ CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs. Your task: Find PRs that introduced or modified . -1. Run: gh pr list -R facebook/react --search "" --state all --limit 20 --json number,title,url -2. For promising PRs, read details: gh pr view -R facebook/react +1. Run: gh pr list -R react/react --search "" --state all --limit 20 --json number,title,url +2. For promising PRs, read details: gh pr view -R react/react 3. Look for: - The original RFC/motivation - Design discussions in comments @@ -189,7 +189,7 @@ CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issu Your task: Find issues that reveal common confusion about . -1. Search facebook/react: gh issue list -R facebook/react --search "" --state all --limit 20 --json number,title,url +1. Search react/react: gh issue list -R react/react --search "" --state all --limit 20 --json number,title,url 2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "" --state all --limit 20 --json number,title,url 3. For each issue, identify: - What the user was confused about @@ -199,7 +199,7 @@ Your task: Find issues that reveal common confusion about . Format your output as: ## Common Confusion ### Issue #: -**Repo:** <facebook/react or reactjs/react.dev> +**Repo:** <react/react or reactjs/react.dev> **Confusion:** <what they misunderstood> **Resolution:** <correct understanding> **Gotcha:** <if applicable> diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 63e310e0..de2bfc36 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,6 +1,6 @@ contact_links: - name: 📃 Bugs in React - url: https://github.com/facebook/react/issues/new/choose + url: https://github.com/react/react/issues/new/choose about: This issue tracker is not for bugs in React. Please file React issues here. - name: 🤔 Questions and Help url: https://reactjs.org/community/support.html diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index 2f5b2a49..97f8d183 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -8,7 +8,7 @@ permissions: {} jobs: check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + uses: react/react/.github/workflows/shared_check_maintainer.yml@main permissions: # Used by check_maintainer contents: read diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index f9b3328e..4cb6fbc7 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -12,7 +12,7 @@ env: jobs: check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + uses: react/react/.github/workflows/shared_check_maintainer.yml@main permissions: # Used by check_maintainer contents: read diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js index 46a21cdc..287dde36 100644 --- a/scripts/deadLinkChecker.js +++ b/scripts/deadLinkChecker.js @@ -311,7 +311,7 @@ async function buildContributorMap() { async function fetchErrorCodes() { try { const response = await fetch( - 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + 'https://raw.githubusercontent.com/react/react/main/scripts/error-codes/codes.json' ); if (!response.ok) { throw new Error(`Failed to fetch error codes: ${response.status}`); diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index d11e1469..50aed211 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -344,7 +344,7 @@ export function Footer() { <FooterLink href="/community" isHeader={true}> Community </FooterLink> - <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md"> + <FooterLink href="https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md"> Code of Conduct </FooterLink> <FooterLink href="/community/team">Meet the Team</FooterLink> @@ -386,7 +386,7 @@ export function Footer() { </ExternalLink> <ExternalLink aria-label="React on Github" - href="https://github.com/facebook/react" + href="https://github.com/react/react" className={socialLinkClasses}> <IconGitHub /> </ExternalLink> diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index efc90ed2..37c2768a 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -386,7 +386,7 @@ export default function TopNav({ </div> <div className="flex"> <Link - href="https://github.com/facebook/react/releases" + href="https://github.com/react/react/releases" target="_blank" rel="noreferrer noopener" aria-label="Open on GitHub" diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index b51627d8..cb5d4e84 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -19,7 +19,7 @@ let supportsImportMap = false; function subscribe(cb: () => void) { // This shouldn't actually need to update, but this works around - // https://github.com/facebook/react/issues/26095 + // https://github.com/react/react/issues/26095 let timeout = setTimeout(() => { supportsImportMap = (HTMLScriptElement as any).supports && diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index bed24396..1004523b 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -51,7 +51,7 @@ Everyone can read the discussions in the [React 18 Working Group repo](https://g Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. -As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/react/react/issues). ## How to try React 18 Alpha today {/*how-to-try-react-18-alpha-today*/} diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 9d34dfaa..50babfb1 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -13,7 +13,7 @@ March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii) As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. -Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18. +Please [report any issues](https://github.com/react/react/issues/new/choose) you encounter while upgrading to React 18. </Intro> @@ -317,8 +317,8 @@ If you need to support Internet Explorer we recommend you stay with React 17. * **Components can now render `undefined`:** React no longer warns if you return `undefined` from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a `return` statement before JSX. * **In tests, `act` warnings are now opt-in:** If you're running end-to-end tests, the `act` warnings are unnecessary. We've introduced an [opt-in](https://github.com/reactwg/react-18/discussions/102) mechanism so you can enable them only for unit tests where they are useful and beneficial. -* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/facebook/react/pull/22114) this warning. -* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/facebook/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely. +* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/react/react/pull/22114) this warning. +* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/react/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely. * **Improved memory usage:** React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe. ### React DOM Server {/*react-dom-server*/} @@ -328,4 +328,4 @@ If you need to support Internet Explorer we recommend you stay with React 17. ## Changelog {/*changelog*/} -You can view the [full changelog here](https://github.com/facebook/react/blob/main/CHANGELOG.md). +You can view the [full changelog here](https://github.com/react/react/blob/main/CHANGELOG.md). diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index d21eeb1f..b68ef4e8 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -270,75 +270,75 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st ### React {/*react*/} -* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) -* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) -* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) -* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/facebook/react/pull/20953) by [@acdlite](https://github.com/acdlite)) -* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150) by [@acdlite](https://github.com/acdlite)) -* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) -* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039) by [@bgirard](https://github.com/bgirard)) -* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) by [@justingrant](https://github.com/justingrant)) -* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) by [@gaearon](https://github.com/gaearon)) -* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095) by [@gaearon](https://github.com/gaearon)) -* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) -* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111) by [@gaearon](https://github.com/gaearon)) -* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316) by [@gnoff](https://github.com/gnoff)) -* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/facebook/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) -* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) -* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267) by [@acdlite](https://github.com/acdlite)) -* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319) by [@acdlite](https://github.com/acdlite)) +* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/react/react/pull/10426), [#10715](https://github.com/react/react/pull/10715), [#15593](https://github.com/react/react/pull/15593), [#15272](https://github.com/react/react/pull/15272), [#15578](https://github.com/react/react/pull/15578), [#15769](https://github.com/react/react/pull/15769), [#17058](https://github.com/react/react/pull/17058), [#18796](https://github.com/react/react/pull/18796), [#19121](https://github.com/react/react/pull/19121), [#19703](https://github.com/react/react/pull/19703), [#19719](https://github.com/react/react/pull/19719), [#19724](https://github.com/react/react/pull/19724), [#20672](https://github.com/react/react/pull/20672), [#20976](https://github.com/react/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useId` for generating unique IDs. ([#17322](https://github.com/react/react/pull/17322), [#18576](https://github.com/react/react/pull/18576), [#22644](https://github.com/react/react/pull/22644), [#22672](https://github.com/react/react/pull/22672), [#21260](https://github.com/react/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/react/react/pull/15022), [#18000](https://github.com/react/react/pull/18000), [#18771](https://github.com/react/react/pull/18771), [#22211](https://github.com/react/react/pull/22211), [#22292](https://github.com/react/react/pull/22292), [#22239](https://github.com/react/react/pull/22239), [#22347](https://github.com/react/react/pull/22347), [#23150](https://github.com/react/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) +* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/react/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/react/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/react/react/pull/19322), [#19374](https://github.com/react/react/pull/19374), [#19523](https://github.com/react/react/pull/19523), [#20625](https://github.com/react/react/pull/20625), [#21079](https://github.com/react/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) +* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/react/react/pull/19523) , [#21418](https://github.com/react/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) +* Assume Symbols are always available. ([#23348](https://github.com/react/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove `object-assign` polyfill. ([#23351](https://github.com/react/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/react/react/pull/20953) by [@acdlite](https://github.com/acdlite)) +* Allow components to render undefined. ([#21869](https://github.com/react/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/react/react/pull/21150) by [@acdlite](https://github.com/acdlite)) +* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/react/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/react/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Don't patch console during first render. ([#22308](https://github.com/react/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) +* Improve memory usage. ([#21039](https://github.com/react/react/pull/21039) by [@bgirard](https://github.com/bgirard)) +* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/react/react/pull/22064) by [@justingrant](https://github.com/justingrant)) +* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/react/react/pull/20834) by [@gaearon](https://github.com/gaearon)) +* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/react/react/pull/23095) by [@gaearon](https://github.com/gaearon)) +* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/react/react/pull/23111) by [@gaearon](https://github.com/gaearon)) +* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/react/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/react/react/pull/23316) by [@gnoff](https://github.com/gnoff)) +* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/react/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix the generated license header. ([#23004](https://github.com/react/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) +* Add `package.json` as one of the entry points. ([#22954](https://github.com/react/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) +* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/react/react/pull/23267) by [@acdlite](https://github.com/acdlite)) +* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/react/react/pull/23319) by [@acdlite](https://github.com/acdlite)) ### React DOM {/*react-dom*/} -* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) -* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) -* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) -* Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/facebook/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/facebook/react/pull/21100) by [@gaearon](https://github.com/gaearon)) -* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/facebook/react/pull/23355) by [@acdlite](https://github.com/acdlite)) +* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/react/react/pull/10239), [#11225](https://github.com/react/react/pull/11225), [#12117](https://github.com/react/react/pull/12117), [#13732](https://github.com/react/react/pull/13732), [#15502](https://github.com/react/react/pull/15502), [#15532](https://github.com/react/react/pull/15532), [#17035](https://github.com/react/react/pull/17035), [#17165](https://github.com/react/react/pull/17165), [#20669](https://github.com/react/react/pull/20669), [#20748](https://github.com/react/react/pull/20748), [#20888](https://github.com/react/react/pull/20888), [#21072](https://github.com/react/react/pull/21072), [#21417](https://github.com/react/react/pull/21417), [#21652](https://github.com/react/react/pull/21652), [#21687](https://github.com/react/react/pull/21687), [#23207](https://github.com/react/react/pull/23207), [#23385](https://github.com/react/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add selective hydration. ([#14717](https://github.com/react/react/pull/14717), [#14884](https://github.com/react/react/pull/14884), [#16725](https://github.com/react/react/pull/16725), [#16880](https://github.com/react/react/pull/16880), [#17004](https://github.com/react/react/pull/17004), [#22416](https://github.com/react/react/pull/22416), [#22629](https://github.com/react/react/pull/22629), [#22448](https://github.com/react/react/pull/22448), [#22856](https://github.com/react/react/pull/22856), [#23176](https://github.com/react/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/react/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) +* Add `onResize` event to video elements. ([#21973](https://github.com/react/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) +* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/react/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) +* Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/react/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/react/react/pull/21100) by [@gaearon](https://github.com/gaearon)) +* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/react/react/pull/23355) by [@acdlite](https://github.com/acdlite)) ### React DOM Server {/*react-dom-server-1*/} -* Add the new streaming renderer. ([#14144](https://github.com/facebook/react/pull/14144), [#20970](https://github.com/facebook/react/pull/20970), [#21056](https://github.com/facebook/react/pull/21056), [#21255](https://github.com/facebook/react/pull/21255), [#21200](https://github.com/facebook/react/pull/21200), [#21257](https://github.com/facebook/react/pull/21257), [#21276](https://github.com/facebook/react/pull/21276), [#22443](https://github.com/facebook/react/pull/22443), [#22450](https://github.com/facebook/react/pull/22450), [#23247](https://github.com/facebook/react/pull/23247), [#24025](https://github.com/facebook/react/pull/24025), [#24030](https://github.com/facebook/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/facebook/react/pull/23171) by [@frandiox](https://github.com/frandiox)) -* Revert to client render on text mismatch. ([#23354](https://github.com/facebook/react/pull/23354) by [@acdlite](https://github.com/acdlite)) -* Deprecate `renderToNodeStream`. ([#23359](https://github.com/facebook/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/facebook/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) -* Fix a bug in the new server renderer. ([#22617](https://github.com/facebook/react/pull/22617) by [@shuding](https://github.com/shuding)) -* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/facebook/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Add the new streaming renderer. ([#14144](https://github.com/react/react/pull/14144), [#20970](https://github.com/react/react/pull/20970), [#21056](https://github.com/react/react/pull/21056), [#21255](https://github.com/react/react/pull/21255), [#21200](https://github.com/react/react/pull/21200), [#21257](https://github.com/react/react/pull/21257), [#21276](https://github.com/react/react/pull/21276), [#22443](https://github.com/react/react/pull/22443), [#22450](https://github.com/react/react/pull/22450), [#23247](https://github.com/react/react/pull/23247), [#24025](https://github.com/react/react/pull/24025), [#24030](https://github.com/react/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/react/react/pull/23171) by [@frandiox](https://github.com/frandiox)) +* Revert to client render on text mismatch. ([#23354](https://github.com/react/react/pull/23354) by [@acdlite](https://github.com/acdlite)) +* Deprecate `renderToNodeStream`. ([#23359](https://github.com/react/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/react/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) +* Fix a bug in the new server renderer. ([#22617](https://github.com/react/react/pull/22617) by [@shuding](https://github.com/shuding)) +* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/react/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) ### React DOM Test Utils {/*react-dom-test-utils*/} -* Throw when `act` is used in production. ([#21686](https://github.com/facebook/react/pull/21686) by [@acdlite](https://github.com/acdlite)) -* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561) by [@acdlite](https://github.com/acdlite)) -* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/facebook/react/pull/22607) by [@acdlite](https://github.com/acdlite)) -* Make `act` batch updates. ([#21797](https://github.com/facebook/react/pull/21797) by [@acdlite](https://github.com/acdlite)) -* Remove warning for dangling passive effects. ([#22609](https://github.com/facebook/react/pull/22609) by [@acdlite](https://github.com/acdlite)) +* Throw when `act` is used in production. ([#21686](https://github.com/react/react/pull/21686) by [@acdlite](https://github.com/acdlite)) +* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/react/react/pull/22561) by [@acdlite](https://github.com/acdlite)) +* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/react/react/pull/22607) by [@acdlite](https://github.com/acdlite)) +* Make `act` batch updates. ([#21797](https://github.com/react/react/pull/21797) by [@acdlite](https://github.com/acdlite)) +* Remove warning for dangling passive effects. ([#22609](https://github.com/react/react/pull/22609) by [@acdlite](https://github.com/acdlite)) ### React Refresh {/*react-refresh*/} -* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/facebook/react/pull/22740) by [@anc95](https://github.com/anc95)) -* Add `exports` field to `package.json`. ([#23087](https://github.com/facebook/react/pull/23087) by [@otakustay](https://github.com/otakustay)) +* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/react/react/pull/22740) by [@anc95](https://github.com/anc95)) +* Add `exports` field to `package.json`. ([#23087](https://github.com/react/react/pull/23087) by [@otakustay](https://github.com/otakustay)) ### Server Components (Experimental) {/*server-components-experimental*/} -* Add Server Context support. ([#23244](https://github.com/facebook/react/pull/23244) by [@salazarm](https://github.com/salazarm)) -* Add `lazy` support. ([#24068](https://github.com/facebook/react/pull/24068) by [@gnoff](https://github.com/gnoff)) -* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly)) -* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea)) -* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi)) +* Add Server Context support. ([#23244](https://github.com/react/react/pull/23244) by [@salazarm](https://github.com/salazarm)) +* Add `lazy` support. ([#24068](https://github.com/react/react/pull/24068) by [@gnoff](https://github.com/gnoff)) +* Update webpack plugin for webpack 5 ([#22739](https://github.com/react/react/pull/22739) by [@michenly](https://github.com/michenly)) +* Fix a mistake in the Node loader. ([#22537](https://github.com/react/react/pull/22537) by [@btea](https://github.com/btea)) +* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/react/react/pull/22777) by [@huozhi](https://github.com/huozhi)) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 1aaa94ec..b021bc3f 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -69,7 +69,7 @@ Currently, React has two profiling tools. The [original Profiler](https://legacy We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it. -We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/facebook/react/pull/20037) because of these issues. +We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/react/react/pull/20037) because of these issues. We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via `startTransition`) that solves these problems. diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 1823ebdf..6f918a2a 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -24,7 +24,7 @@ To help make the upgrade to React 19 easier, we've published a `react@18.3` rele We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. -For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024). +For a list of changes in 18.3 see the [Release Notes](https://github.com/react/react/blob/main/CHANGELOG.md#1830-april-25-2024). </Note> @@ -38,7 +38,7 @@ In this post, we will guide you through the steps for upgrading to React 19: - [TypeScript changes](#typescript-changes) - [Changelog](#changelog) -If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/react/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). --- ## Installing {/*installing*/} @@ -256,7 +256,7 @@ class Child extends React.Component { #### Removed: string refs {/*removed-string-refs*/} String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html). -Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. +Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/react/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. If you're still using string refs in class components, you'll need to migrate to ref callbacks: @@ -730,24 +730,24 @@ const reducer = (state: State, action: Action) => state; ### Other breaking changes {/*other-breaking-changes*/} -- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507) -- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) -- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) -- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271) -- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) -- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) -- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224) +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/react/react/pull/26507) +- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/react/react/pull/28222) +- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/react/react/pull/26397) +- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/react/react/pull/28271) +- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/react/react/pull/28224) ### Other notable changes {/*other-notable-changes*/} -- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/facebook/react/pull/25700) -- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/facebook/react/pull/26380) -- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/facebook/react/pull/26625) -- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/facebook/react/pull/26025) -- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395) -- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124) +- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/react/react/pull/25700) +- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/react/react/pull/26380) +- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/react/react/pull/26625) +- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/react/react/pull/26025) +- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/react/react/pull/26395) +- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/react/react/pull/28124) -For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024). +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md#1900-december-5-2024). --- 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 index e2246401..d0774782 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -45,7 +45,7 @@ Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Cl - [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov) - [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds) -Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out. +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/react/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: diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 750c0f3b..5cc5f19a 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -92,7 +92,7 @@ Because your code is pre-compiled, users of your library will not need to have t We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. -From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). +From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/react/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. @@ -127,7 +127,7 @@ Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https --- -[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. +[^1]: Thanks [@nikeee](https://github.com/react/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/react/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/react/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. [^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 74964645..93ac0c36 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -182,7 +182,7 @@ const [error, submitAction, isPending] = useActionState( `React.useActionState` was previously called `ReactDOM.useFormState` in the Canary releases, but we've renamed it and deprecated `useFormState`. -See [#28491](https://github.com/facebook/react/pull/28491) for more info. +See [#28491](https://github.com/react/react/pull/28491) for more info. </Note> diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 9b6095f8..dbd673a2 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -11458,7 +11458,7 @@ root.render( If you're curious to know more about how they work, check out [How Does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs. -_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ +_For more background on how we built View Transitions, see: [#31975](https://github.com/react/react/pull/31975), [#32105](https://github.com/react/react/pull/32105), [#32041](https://github.com/react/react/pull/32041), [#32734](https://github.com/react/react/pull/32734), [#32797](https://github.com/react/react/pull/32797) [#31999](https://github.com/react/react/pull/31999), [#32031](https://github.com/react/react/pull/32031), [#32050](https://github.com/react/react/pull/32050), [#32820](https://github.com/react/react/pull/32820), [#32029](https://github.com/react/react/pull/32029), [#32028](https://github.com/react/react/pull/32028), and [#32038](https://github.com/react/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ --- diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 51c30f70..feee6cdb 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -300,7 +300,7 @@ To continue using the legacy config, you can change to `recommended-legacy`: For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended). -Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). +Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). --- @@ -315,23 +315,23 @@ The original intent of using a special character that was not valid for CSS sele ## Changelog {/*changelog*/} Other notable changes -- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/facebook/react/pull/32461) -- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/facebook/react/pull/32774) +- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/react/react/pull/32461) +- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/react/react/pull/32774) Notable bug fixes -- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/facebook/react/pull/33507) -- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/facebook/react/pull/32821) -- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/facebook/react/pull/34376) -- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/facebook/react/pull/33055) -- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/facebook/react/pull/32900) -- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/facebook/react/pull/34145) -- `react`: Improve component stacks in various places [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723) -- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/facebook/react/pull/33941) -- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/facebook/react/pull/34264) -- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/facebook/react/pull/33467) -- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/facebook/react/pull/34192) - -For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md). +- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/react/react/pull/33507) +- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/react/react/pull/32821) +- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/react/react/pull/34376) +- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/react/react/pull/33055) +- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/react/react/pull/32900) +- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/react/react/pull/34145) +- `react`: Improve component stacks in various places [#33629](https://github.com/react/react/pull/33629), [#33724](https://github.com/react/react/pull/33724), [#32735](https://github.com/react/react/pull/32735), [#33723](https://github.com/react/react/pull/33723) +- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/react/react/pull/33941) +- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/react/react/pull/34264) +- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/react/react/pull/33467) +- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/react/react/pull/34192) + +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). --- diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 080f3586..ee5ffa4f 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -132,7 +132,7 @@ export default defineConfig([ } ``` -To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf: +To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf: - Catching `setState` patterns that cause render loops with [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render). - Flagging expensive work inside effects via [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect). diff --git a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md index 310a8411..a669a2c4 100644 --- a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md +++ b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md @@ -34,7 +34,7 @@ The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: ## Immediate Action Required {/*immediate-action-required*/} -A fix was introduced in versions [19.0.1](https://github.com/facebook/react/releases/tag/v19.0.1), [19.1.2](https://github.com/facebook/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/facebook/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. +A fix was introduced in versions [19.0.1](https://github.com/react/react/releases/tag/v19.0.1), [19.1.2](https://github.com/react/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/react/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. If your app’s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. @@ -193,7 +193,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact This is required to mitigate the security advisory, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. -See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. ## Timeline {/*timeline*/} diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md index 70e5c2e6..206d49e3 100644 --- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md +++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md @@ -98,7 +98,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact This is required to mitigate the security advisories, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. -See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. --- diff --git a/src/content/blog/index.md b/src/content/blog/index.md index c75265fd..d2930fea 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -150,7 +150,7 @@ The React team is excited to share a few updates: ### All release notes {/*all-release-notes*/} -Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/facebook/react/releases) page. +Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/react/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/react/react/releases) page. --- diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index bfe67f55..7c84285f 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -4,7 +4,7 @@ title: Acknowledgements <Intro> -React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/graphs/contributors) +React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/react/react/graphs/contributors) </Intro> diff --git a/src/content/community/index.md b/src/content/community/index.md index cf8f9323..9bd0d09c 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -10,7 +10,7 @@ React has a community of millions of developers. On this page we've listed some ## Code of Conduct {/*code-of-conduct*/} -Before participating in React's communities, [please read our Code of Conduct.](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. +Before participating in React's communities, [please read our Code of Conduct.](https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. ## Stack Overflow {/*stack-overflow*/} diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index a61d1994..2e3edb61 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -136,7 +136,7 @@ If you're the author of a third party React framework, library, developer tool, ``` - Run your test suite against the updated packages. - If everything passes, great! You can expect that your project will work with the next minor React release. -- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues). +- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/react/react/issues). A project that uses this workflow is Next.js. You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. @@ -166,4 +166,4 @@ If a feature is not documented, they may be accompanied by an [RFC](https://gith We will post to the [React blog](/blog) when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment. -You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/main) for a comprehensive list of changes. +You can always refer to our public GitHub repository's [history](https://github.com/react/react/commits/main) for a comprehensive list of changes. diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 1883125a..a2981e09 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -43,7 +43,7 @@ Follow these steps when you encounter issues: ### Compiler Build Errors {/*compiler-build-errors*/} -If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with: +If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [react/react](https://github.com/react/react/issues) repository with: - The error message - The code that caused the error - Your React and compiler versions @@ -81,7 +81,7 @@ If you believe you've found a compiler bug: 1. **Verify it's not a Rules of React violation** - Check with ESLint 2. **Create a minimal reproduction** - Isolate the issue in a small example 3. **Test without the compiler** - Confirm the issue only occurs with compilation -4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: +4. **File an [issue](https://github.com/react/react/issues/new?template=compiler_bug_report.yml)**: - React and compiler versions - Minimal reproduction code - Expected vs actual behavior diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 0ae0df17..b386e866 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -190,7 +190,7 @@ Install the ESLint plugin: npm install -D eslint-plugin-react-hooks@latest </TerminalBlock> -If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. The ESLint rule will: - Identify violations of the [Rules of React](/reference/rules) diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md index e057e197..6acffb22 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md @@ -16,7 +16,7 @@ These libraries were designed before React's memoization rules were fully docume ## Rule Details {/*rule-details*/} -Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app. +Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/react/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app. ```js // Example of how memoization breaks with these libraries @@ -135,4 +135,4 @@ function Component() { } ``` -Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/facebook/react/issues) so we can add it to the linter. +Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/react/react/issues) so we can add it to the linter. diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 51b74119..ff2f526a 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -36,7 +36,7 @@ These special React props are supported for all built-in components: * `suppressHydrationWarning`: A boolean. If you use [server rendering,](/reference/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read about suppressing hydration errors.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors) -* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) +* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/react/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) These standard DOM props are also supported for all built-in components: diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 84b8873a..0c1412f1 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -59,7 +59,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content. * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell) - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f3e86212..22d872ee 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 8ad47aa1..9d335ef3 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -56,7 +56,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **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 passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 7a31f66a..e2ee3605 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **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 passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} diff --git a/src/content/versions.md b/src/content/versions.md index 8cc54085..2c2e3620 100644 --- a/src/content/versions.md +++ b/src/content/versions.md @@ -54,31 +54,31 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI) **Releases** -- [v19.2.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1927-june-1-2026) -- [v19.2.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1926-may-6-2026) -- [v19.2.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1925-march-18-2026) -- [v19.2.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1924-jan-26-2026) -- [v19.2.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1923-dec-11-2025) -- [v19.2.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1922-dec-11-2025) -- [v19.2.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1921-dec-3-2025) -- [v19.2.0 (October, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1920-october-1st-2025) -- [v19.1.8 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1918-june-1-2026) -- [v19.1.7 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1917-may-6-2026) -- [v19.1.6 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1916-march-18-2026) -- [v19.1.5 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1915-jan-26-2026) -- [v19.1.4 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1914-dec-11-2025) -- [v19.1.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1913-dec-11-2025) -- [v19.1.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1912-dec-3-2025) -- [v19.1.1 (July, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1911-july-28-2025) -- [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025) -- [v19.0.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1907-june-1-2026) -- [v19.0.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1906-may-6-2026) -- [v19.0.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1905-march-18-2026) -- [v19.0.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1904-jan-26-2026) -- [v19.0.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1903-dec-11-2025) -- [v19.0.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1902-dec-11-2025) -- [v19.0.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1901-dec-3-2025) -- [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024) +- [v19.2.7 (June, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1927-june-1-2026) +- [v19.2.6 (May, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1926-may-6-2026) +- [v19.2.5 (March, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1925-march-18-2026) +- [v19.2.4 (January, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1924-jan-26-2026) +- [v19.2.3 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1923-dec-11-2025) +- [v19.2.2 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1922-dec-11-2025) +- [v19.2.1 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1921-dec-3-2025) +- [v19.2.0 (October, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1920-october-1st-2025) +- [v19.1.8 (June, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1918-june-1-2026) +- [v19.1.7 (May, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1917-may-6-2026) +- [v19.1.6 (March, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1916-march-18-2026) +- [v19.1.5 (January, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1915-jan-26-2026) +- [v19.1.4 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1914-dec-11-2025) +- [v19.1.3 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1913-dec-11-2025) +- [v19.1.2 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1912-dec-3-2025) +- [v19.1.1 (July, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1911-july-28-2025) +- [v19.1.0 (March, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1910-march-28-2025) +- [v19.0.7 (June, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1907-june-1-2026) +- [v19.0.6 (May, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1906-may-6-2026) +- [v19.0.5 (March, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1905-march-18-2026) +- [v19.0.4 (January, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1904-jan-26-2026) +- [v19.0.3 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1903-dec-11-2025) +- [v19.0.2 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1902-dec-11-2025) +- [v19.0.1 (December, 2025)](https://github.com/react/react/blob/main/CHANGELOG.md#1901-dec-3-2025) +- [v19.0.0 (December, 2024)](https://github.com/react/react/blob/main/CHANGELOG.md#1900-december-5-2024) ### React 18 {/*react-18*/} @@ -98,11 +98,11 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React 18 for External Store Libraries](https://www.youtube.com/watch?v=oPfSC5bQPR8) **Releases** -- [v18.3.1 (April, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1831-april-26-2024) -- [v18.3.0 (April, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024) -- [v18.2.0 (June, 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022) -- [v18.1.0 (April, 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1810-april-26-2022) -- [v18.0.0 (March 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022) +- [v18.3.1 (April, 2024)](https://github.com/react/react/blob/main/CHANGELOG.md#1831-april-26-2024) +- [v18.3.0 (April, 2024)](https://github.com/react/react/blob/main/CHANGELOG.md#1830-april-25-2024) +- [v18.2.0 (June, 2022)](https://github.com/react/react/blob/main/CHANGELOG.md#1820-june-14-2022) +- [v18.1.0 (April, 2022)](https://github.com/react/react/blob/main/CHANGELOG.md#1810-april-26-2022) +- [v18.0.0 (March 2022)](https://github.com/react/react/blob/main/CHANGELOG.md#1800-march-29-2022) ### React 17 {/*react-17*/} @@ -112,9 +112,9 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v17.0 Release Candidate: No New Features](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html) **Releases** -- [v17.0.2 (March 2021)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021) -- [v17.0.1 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1701-october-22-2020) -- [v17.0.0 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1700-october-20-2020) +- [v17.0.2 (March 2021)](https://github.com/react/react/blob/main/CHANGELOG.md#1702-march-22-2021) +- [v17.0.1 (October 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#1701-october-22-2020) +- [v17.0.0 (October 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#1700-october-20-2020) ### React 16 {/*react-16*/} @@ -132,44 +132,44 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v16.13.0](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html) **Releases** -- [v16.14.0 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16140-october-14-2020) -- [v16.13.1 (March 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16131-march-19-2020) -- [v16.13.0 (February 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16130-february-26-2020) -- [v16.12.0 (November 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16120-november-14-2019) -- [v16.11.0 (October 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16110-october-22-2019) -- [v16.10.2 (October 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16102-october-3-2019) -- [v16.10.1 (September 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16101-september-28-2019) -- [v16.10.0 (September 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16100-september-27-2019) -- [v16.9.0 (August 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1690-august-8-2019) -- [v16.8.6 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1686-march-27-2019) -- [v16.8.5 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1685-march-22-2019) -- [v16.8.4 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1684-march-5-2019) -- [v16.8.3 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1683-february-21-2019) -- [v16.8.2 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1682-february-14-2019) -- [v16.8.1 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1681-february-6-2019) -- [v16.8.0 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1680-february-6-2019) -- [v16.7.0 (December 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1670-december-19-2018) -- [v16.6.3 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1663-november-12-2018) -- [v16.6.2 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1662-november-12-2018) -- [v16.6.1 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1661-november-6-2018) -- [v16.6.0 (October 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1660-october-23-2018) -- [v16.5.2 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1652-september-18-2018) -- [v16.5.1 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1651-september-13-2018) -- [v16.5.0 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1650-september-5-2018) -- [v16.4.2 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1642-august-1-2018) -- [v16.4.1 (June 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1641-june-13-2018) -- [v16.4.0 (May 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1640-may-23-2018) -- [v16.3.3 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1633-august-1-2018) -- [v16.3.2 (April 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1632-april-16-2018) -- [v16.3.1 (April 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1631-april-3-2018) -- [v16.3.0 (March 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1630-march-29-2018) -- [v16.2.1 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1621-august-1-2018) -- [v16.2.0 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1620-november-28-2017) -- [v16.1.2 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1612-august-1-2018) -- [v16.1.1 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1611-november-13-2017) -- [v16.1.0 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1610-november-9-2017) -- [v16.0.1 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1601-august-1-2018) -- [v16.0 (September 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1600-september-26-2017) +- [v16.14.0 (October 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#16140-october-14-2020) +- [v16.13.1 (March 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#16131-march-19-2020) +- [v16.13.0 (February 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#16130-february-26-2020) +- [v16.12.0 (November 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#16120-november-14-2019) +- [v16.11.0 (October 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#16110-october-22-2019) +- [v16.10.2 (October 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#16102-october-3-2019) +- [v16.10.1 (September 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#16101-september-28-2019) +- [v16.10.0 (September 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#16100-september-27-2019) +- [v16.9.0 (August 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1690-august-8-2019) +- [v16.8.6 (March 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1686-march-27-2019) +- [v16.8.5 (March 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1685-march-22-2019) +- [v16.8.4 (March 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1684-march-5-2019) +- [v16.8.3 (February 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1683-february-21-2019) +- [v16.8.2 (February 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1682-february-14-2019) +- [v16.8.1 (February 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1681-february-6-2019) +- [v16.8.0 (February 2019)](https://github.com/react/react/blob/main/CHANGELOG.md#1680-february-6-2019) +- [v16.7.0 (December 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1670-december-19-2018) +- [v16.6.3 (November 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1663-november-12-2018) +- [v16.6.2 (November 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1662-november-12-2018) +- [v16.6.1 (November 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1661-november-6-2018) +- [v16.6.0 (October 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1660-october-23-2018) +- [v16.5.2 (September 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1652-september-18-2018) +- [v16.5.1 (September 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1651-september-13-2018) +- [v16.5.0 (September 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1650-september-5-2018) +- [v16.4.2 (August 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1642-august-1-2018) +- [v16.4.1 (June 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1641-june-13-2018) +- [v16.4.0 (May 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1640-may-23-2018) +- [v16.3.3 (August 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1633-august-1-2018) +- [v16.3.2 (April 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1632-april-16-2018) +- [v16.3.1 (April 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1631-april-3-2018) +- [v16.3.0 (March 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1630-march-29-2018) +- [v16.2.1 (August 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1621-august-1-2018) +- [v16.2.0 (November 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1620-november-28-2017) +- [v16.1.2 (August 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1612-august-1-2018) +- [v16.1.1 (November 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1611-november-13-2017) +- [v16.1.0 (November 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1610-november-9-2017) +- [v16.0.1 (August 2018)](https://github.com/react/react/blob/main/CHANGELOG.md#1601-august-1-2018) +- [v16.0 (September 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1600-september-26-2017) ### React 15 {/*react-15*/} @@ -187,27 +187,27 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v15.6.2](https://legacy.reactjs.org/blog/2017/09/25/react-v15.6.2.html) **Releases** -- [v15.7.0 (October 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1570-october-14-2020) -- [v15.6.2 (September 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1562-september-25-2017) -- [v15.6.1 (June 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1561-june-14-2017) -- [v15.6.0 (June 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1560-june-13-2017) -- [v15.5.4 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1554-april-11-2017) -- [v15.5.3 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1553-april-7-2017) -- [v15.5.2 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1552-april-7-2017) -- [v15.5.1 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1551-april-7-2017) -- [v15.5.0 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1550-april-7-2017) -- [v15.4.2 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1542-january-6-2017) -- [v15.4.1 (November 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1541-november-22-2016) -- [v15.4.0 (November 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1540-november-16-2016) -- [v15.3.2 (September 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1532-september-19-2016) -- [v15.3.1 (August 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1531-august-19-2016) -- [v15.3.0 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1530-july-29-2016) -- [v15.2.1 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1521-july-8-2016) -- [v15.2.0 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1520-july-1-2016) -- [v15.1.0 (May 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1510-may-20-2016) -- [v15.0.2 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1502-april-29-2016) -- [v15.0.1 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1501-april-8-2016) -- [v15.0.0 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1500-april-7-2016) +- [v15.7.0 (October 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1570-october-14-2020) +- [v15.6.2 (September 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1562-september-25-2017) +- [v15.6.1 (June 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1561-june-14-2017) +- [v15.6.0 (June 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1560-june-13-2017) +- [v15.5.4 (April 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1554-april-11-2017) +- [v15.5.3 (April 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1553-april-7-2017) +- [v15.5.2 (April 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1552-april-7-2017) +- [v15.5.1 (April 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1551-april-7-2017) +- [v15.5.0 (April 2017)](https://github.com/react/react/blob/main/CHANGELOG.md#1550-april-7-2017) +- [v15.4.2 (January 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1542-january-6-2017) +- [v15.4.1 (November 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1541-november-22-2016) +- [v15.4.0 (November 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1540-november-16-2016) +- [v15.3.2 (September 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1532-september-19-2016) +- [v15.3.1 (August 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1531-august-19-2016) +- [v15.3.0 (July 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1530-july-29-2016) +- [v15.2.1 (July 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1521-july-8-2016) +- [v15.2.0 (July 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1520-july-1-2016) +- [v15.1.0 (May 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1510-may-20-2016) +- [v15.0.2 (April 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1502-april-29-2016) +- [v15.0.1 (April 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1501-april-8-2016) +- [v15.0.0 (April 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#1500-april-7-2016) ### React 0.14 {/*react-14*/} @@ -224,16 +224,16 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v0.14.8](https://legacy.reactjs.org/blog/2016/03/29/react-v0.14.8.html) **Releases** -- [v0.14.10 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#01410-october-14-2020) -- [v0.14.8 (March 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0148-march-29-2016) -- [v0.14.7 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0147-january-28-2016) -- [v0.14.6 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0146-january-6-2016) -- [v0.14.5 (December 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0145-december-29-2015) -- [v0.14.4 (December 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0144-december-29-2015) -- [v0.14.3 (November 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0143-november-18-2015) -- [v0.14.2 (November 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0142-november-2-2015) -- [v0.14.1 (October 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0141-october-28-2015) -- [v0.14.0 (October 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0140-october-7-2015) +- [v0.14.10 (October 2020)](https://github.com/react/react/blob/main/CHANGELOG.md#01410-october-14-2020) +- [v0.14.8 (March 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#0148-march-29-2016) +- [v0.14.7 (January 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#0147-january-28-2016) +- [v0.14.6 (January 2016)](https://github.com/react/react/blob/main/CHANGELOG.md#0146-january-6-2016) +- [v0.14.5 (December 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0145-december-29-2015) +- [v0.14.4 (December 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0144-december-29-2015) +- [v0.14.3 (November 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0143-november-18-2015) +- [v0.14.2 (November 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0142-november-2-2015) +- [v0.14.1 (October 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0141-october-28-2015) +- [v0.14.0 (October 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0140-october-7-2015) ### React 0.13 {/*react-13*/} @@ -251,10 +251,10 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v0.13.3](https://legacy.reactjs.org/blog/2015/05/08/react-v0.13.3.html) **Releases** -- [v0.13.3 (May 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0133-may-8-2015) -- [v0.13.2 (April 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0132-april-18-2015) -- [v0.13.1 (March 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0131-march-16-2015) -- [v0.13.0 (March 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0130-march-10-2015) +- [v0.13.3 (May 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0133-may-8-2015) +- [v0.13.2 (April 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0132-april-18-2015) +- [v0.13.1 (March 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0131-march-16-2015) +- [v0.13.0 (March 2015)](https://github.com/react/react/blob/main/CHANGELOG.md#0130-march-10-2015) ### React 0.12 {/*react-12*/} @@ -265,9 +265,9 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v0.12.2](https://legacy.reactjs.org/blog/2014/12/18/react-v0.12.2.html) **Releases** -- [v0.12.2 (December 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0122-december-18-2014) -- [v0.12.1 (November 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0121-november-18-2014) -- [v0.12.0 (October 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0120-october-28-2014) +- [v0.12.2 (December 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0122-december-18-2014) +- [v0.12.1 (November 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0121-november-18-2014) +- [v0.12.0 (October 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0120-october-28-2014) ### React 0.11 {/*react-11*/} @@ -281,9 +281,9 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [Introducing the JSX Specificaion](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html) **Releases** -- [v0.11.2 (September 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0112-september-16-2014) -- [v0.11.1 (July 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0111-july-24-2014) -- [v0.11.0 (July 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0110-july-17-2014) +- [v0.11.2 (September 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0112-september-16-2014) +- [v0.11.1 (July 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0111-july-24-2014) +- [v0.11.0 (July 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0110-july-17-2014) ### React 0.10 and below {/*react-10-and-below*/} @@ -304,22 +304,22 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React v0.3.3](https://legacy.reactjs.org/blog/2013/06/21/react-v0-3-3.html) **Releases** -- [v0.10.0 (March 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0100-march-21-2014) -- [v0.9.0 (February 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#090-february-20-2014) -- [v0.8.0 (December 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#080-december-19-2013) -- [v0.5.2 (December 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#052-042-december-18-2013) -- [v0.5.1 (October 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#051-october-29-2013) -- [v0.5.0 (October 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#050-october-16-2013) -- [v0.4.1 (July 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#041-july-26-2013) -- [v0.4.0 (July 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#040-july-17-2013) -- [v0.3.3 (June 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#033-june-20-2013) -- [v0.3.2 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#032-may-31-2013) -- [v0.3.1 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#031-may-30-2013) -- [v0.3.0 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#030-may-29-2013) +- [v0.10.0 (March 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0100-march-21-2014) +- [v0.9.0 (February 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#090-february-20-2014) +- [v0.8.0 (December 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#080-december-19-2013) +- [v0.5.2 (December 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#052-042-december-18-2013) +- [v0.5.1 (October 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#051-october-29-2013) +- [v0.5.0 (October 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#050-october-16-2013) +- [v0.4.1 (July 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#041-july-26-2013) +- [v0.4.0 (July 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#040-july-17-2013) +- [v0.3.3 (June 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#033-june-20-2013) +- [v0.3.2 (May 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#032-may-31-2013) +- [v0.3.1 (May 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#031-may-30-2013) +- [v0.3.0 (May 2013)](https://github.com/react/react/blob/main/CHANGELOG.md#030-may-29-2013) ### Initial Commit {/*initial-commit*/} -React was open-sourced on May 29, 2013. The initial commit is: [`75897c`: Initial public release](https://github.com/facebook/react/commit/75897c2dcd1dd3a6ca46284dd37e13d22b4b16b4) +React was open-sourced on May 29, 2013. The initial commit is: [`75897c`: Initial public release](https://github.com/react/react/commit/75897c2dcd1dd3a6ca46284dd37e13d22b4b16b4) See the first blog post: [Why did we build React?](https://legacy.reactjs.org/blog/2013/06/05/why-react.html) diff --git a/src/content/warnings/invalid-aria-prop.md b/src/content/warnings/invalid-aria-prop.md index 2d3b4253..4097cc3b 100644 --- a/src/content/warnings/invalid-aria-prop.md +++ b/src/content/warnings/invalid-aria-prop.md @@ -8,4 +8,4 @@ This warning will fire if you attempt to render a DOM element with an `aria-*` p 2. If you wrote `aria-role`, you may have meant `role`. -3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose). +3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/react/react/issues/new/choose). diff --git a/src/content/warnings/invalid-hook-call-warning.md b/src/content/warnings/invalid-hook-call-warning.md index 5bbc2bba..31b930ee 100644 --- a/src/content/warnings/invalid-hook-call-warning.md +++ b/src/content/warnings/invalid-hook-call-warning.md @@ -143,7 +143,7 @@ window.React2 = require('react'); console.log(window.React1 === window.React2); ``` -If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community. +If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/react/react/issues/13991) includes some common reasons encountered by the community. This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy. @@ -155,4 +155,4 @@ In general, React supports using multiple independent copies on one page (for ex ## Other Causes {/*other-causes*/} -If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it. +If none of this worked, please comment in [this issue](https://github.com/react/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it. diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx index 67466a1d..51a9952e 100644 --- a/src/pages/errors/[errorCode].tsx +++ b/src/pages/errors/[errorCode].tsx @@ -100,7 +100,7 @@ export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({ }) => { const errorCodes: {[key: string]: string} = (cachedErrorCodes ||= await ( await fetch( - 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + 'https://raw.githubusercontent.com/react/react/main/scripts/error-codes/codes.json' ) ).json()); @@ -143,7 +143,7 @@ export const getStaticPaths: GetStaticPaths = async () => { */ const errorCodes = (cachedErrorCodes ||= await ( await fetch( - 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + 'https://raw.githubusercontent.com/react/react/main/scripts/error-codes/codes.json' ) ).json()); diff --git a/src/siteConfig.js b/src/siteConfig.js index fc706af9..48e45300 100644 --- a/src/siteConfig.js +++ b/src/siteConfig.js @@ -17,7 +17,7 @@ exports.siteConfig = { isRTL: false, // -------------------------------------- copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`, - repoUrl: 'https://github.com/facebook/react', + repoUrl: 'https://github.com/react/react', twitterUrl: 'https://twitter.com/reactjs', algolia: { appId: '1FCF9AYYAT', diff --git a/vercel.json b/vercel.json index e467632b..87d006de 100644 --- a/vercel.json +++ b/vercel.json @@ -151,12 +151,12 @@ }, { "source": "/link/react-devtools-faq", - "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq", + "destination": "https://github.com/react/react/tree/main/packages/react-devtools#faq", "permanent": false }, { "source": "/link/setstate-in-render", - "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", + "destination": "https://github.com/react/react/issues/18178#issuecomment-595846312", "permanent": false }, { From efaa3e51f353ebf33842f700331bfa95482e606c Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Thu, 9 Jul 2026 14:48:07 +0200 Subject: [PATCH 05/11] [Suspense] Document what activates a boundary, with live examples (#8505) * [Suspense] Add 'What activates a Suspense boundary' section * [Suspense] Clarify image activation wording (review feedback) * Define "suspense-enabled-framework" * Update outdated framework-less data fetching note to reference use() * fix: clarify Suspense boundary activation and fallback behavior * Add code example * update styling * Cleanup caveat * add link to blogpost * Replace notes with link to suspense docs * Tweak caveat * Update caveat to clarify streaming behavior during server rendering * Address feedback * address feedback * Clarify documentation on Suspense-enabled frameworks * Update links and wording * Improve example * Clarify heading for Suspense-enabled frameworks section * Restructure page * Update to be docs compliant and clarify images * Address review feedback * Add more suspense examples * Add more examples * Clarify image loading behavior during <ViewTransition> updates in Suspense documentation * Enhance Suspense documentation with additional details on font and image loading during <ViewTransition> updates * Update * Enhance Suspense documentation with examples of stylesheet loading behavior and vanilla DOM comparison * agent review --- .../server/renderToPipeableStream.md | 12 +- .../server/renderToReadableStream.md | 12 +- .../reference/react-dom/static/prerender.md | 12 +- .../react-dom/static/prerenderToNodeStream.md | 12 +- src/content/reference/react/Activity.md | 12 +- src/content/reference/react/Suspense.md | 995 +++++++++++++++++- src/content/reference/react/ViewTransition.md | 2 +- src/content/reference/react/use.md | 4 +- .../reference/react/useDeferredValue.md | 6 +- 9 files changed, 992 insertions(+), 75 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 0c1412f1..9668e01b 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -284,17 +284,7 @@ Streaming does not need to wait for React itself to load in the browser, or for <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 22d872ee..7ee0a0bc 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -283,17 +283,7 @@ Streaming does not need to wait for React itself to load in the browser, or for <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 9d335ef3..811e5fc6 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -275,17 +275,7 @@ Imagine that `<Posts />` needs to load some data, which takes some time. Ideally <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index e2ee3605..040357b2 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -276,17 +276,7 @@ Imagine that `<Posts />` needs to load some data, which takes some time. Ideally <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 127a4b8d..b521970b 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -755,17 +755,7 @@ Pre-rendering components with hidden Activity boundaries is a powerful way to re <Note> -**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a cached Promise with [`use`](/reference/react/use) - -Activity **does not** detect data that is fetched inside an Effect. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), is fetched during pre-rendering. Activity does not detect data fetched inside an Effect. </Note> diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index c2fc0b6e..5dd1acbc 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -29,13 +29,39 @@ title: <Suspense> #### Caveats {/*caveats*/} +- Suspense does not detect when data is fetched inside an Effect or event handler. It only activates in the [cases listed below.](#what-activates-a-suspense-boundary) - React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch. - If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue). +- React reveals suspended content at most once every 300ms, measured from the last reveal. Boundaries that become ready within that window are [revealed together](/blog/2025/10/01/react-19-2#batching-suspense-boundaries-for-ssr) rather than one at a time. - If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden. - React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more. --- +### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/} + +A Suspense boundary waits for its content to be ready before revealing it. Any of the following keeps a boundary from revealing its content: + +- Lazy-loading component code with [`lazy`](/reference/react/lazy). +- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks). +- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout. [See an example below.](#waiting-for-a-stylesheet-to-load) +- Waiting for a large boundary's HTML to arrive during streaming server rendering. Sending HTML takes time, so a boundary with enough content activates even when nothing in it suspends. React reveals the content as the HTML arrives. +- <CanaryBadge /> Loading fonts. Suspense doesn't wait for fonts by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load) +- <CanaryBadge /> Loading images. Suspense doesn't wait for images by default, but during a [`<ViewTransition>`](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load) +- <ExperimentalBadge /> Performing CPU-bound render work inside a `<Suspense>` boundary marked with the `defer` prop. + +<Note> + +#### Suspense-enabled frameworks {/*suspense-enabled-frameworks*/} + +A *Suspense-enabled framework* gives you a way to read data in your component in a way that activates the closest Suspense boundary. The exact way you load your data depends on your framework, and you'll find the details in its documentation. Under the hood, a Suspense-enabled framework maintains a cache of Promises and calls [`use`](/reference/react/use) to suspend on a Promise. + +Without a framework, you can read a Promise with `use` directly, as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components) + +</Note> + +--- + ## Usage {/*usage*/} ### Displaying a fallback while content is loading {/*displaying-a-fallback-while-content-is-loading*/} @@ -203,21 +229,256 @@ async function getAlbums() { </Sandpack> -<Note> +By contrast, code that fetches data outside of `use`, such as inside an Effect, does not activate the boundary: + +<Sandpack> + +```js src/App.js hidden +import { useState } from 'react'; +import ArtistPage from './ArtistPage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ( + <ArtistPage + artist={{ + id: 'the-beatles', + name: 'The Beatles', + }} + /> + ); + } else { + return ( + <button onClick={() => setShow(true)}> + Open The Beatles artist page + </button> + ); + } +} +``` -**Only Suspense-enabled data sources will activate the Suspense component.** They include: +```js src/ArtistPage.js active +import { Suspense } from 'react'; +import EffectAlbums from './EffectAlbums.js'; -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a cached Promise with [`use`](/reference/react/use) +export default function ArtistPage({ artist }) { + return ( + <> + <h1>{artist.name}</h1> + <Suspense fallback={<Loading />}> + <EffectAlbums artistId={artist.id} /> + </Suspense> + </> + ); +} -Suspense **does not** detect when data is fetched inside an Effect or event handler. +function Loading() { + return <h2>🌀 Loading...</h2>; +} +``` -The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. +```js src/EffectAlbums.js +import { useState, useEffect } from 'react'; +import { fetchData } from './data.js'; -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +export default function EffectAlbums({ artistId }) { + const [albums, setAlbums] = useState([]); -</Note> + useEffect(() => { + let active = true; + fetchData(`/${artistId}/albums`).then(result => { + if (active) { + setAlbums(result); + } + }); + return () => { + active = false; + }; + }, [artistId]); + + // Suspense can't see this fetch, so its fallback never + // shows. The list stays empty until the data arrives. + return ( + <ul> + {albums.map(album => ( + <li key={album.id}> + {album.title} ({album.year}) + </li> + ))} + </ul> + ); +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. +// Normally, the caching logic would be inside a framework. + +let cache = new Map(); + +export function fetchData(url) { + if (!cache.has(url)) { + cache.set(url, getData(url)); + } + return cache.get(url); +} + +async function getData(url) { + if (url === '/the-beatles/albums') { + return await getAlbums(); + } else { + throw Error('Not implemented'); + } +} + +async function getAlbums() { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 3000); + }); + + return [{ + id: 13, + title: 'Let It Be', + year: 1970 + }, { + id: 12, + title: 'Abbey Road', + year: 1969 + }, { + id: 11, + title: 'Yellow Submarine', + year: 1969 + }, { + id: 10, + title: 'The Beatles', + year: 1968 + }, { + id: 9, + title: 'Magical Mystery Tour', + year: 1967 + }, { + id: 8, + title: 'Sgt. Pepper\'s Lonely Hearts Club Band', + year: 1967 + }, { + id: 7, + title: 'Revolver', + year: 1966 + }, { + id: 6, + title: 'Rubber Soul', + year: 1965 + }, { + id: 5, + title: 'Help!', + year: 1965 + }, { + id: 4, + title: 'Beatles For Sale', + year: 1964 + }, { + id: 3, + title: 'A Hard Day\'s Night', + year: 1964 + }, { + id: 2, + title: 'With The Beatles', + year: 1963 + }, { + id: 1, + title: 'Please Please Me', + year: 1963 + }]; +} +``` + +</Sandpack> + +During streaming server rendering, a boundary also activates while its HTML is still streaming in. With any streaming server rendering API, React sends [the shell](/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell) with the `fallback` first, then streams in each boundary's HTML and swaps out its `fallback` as that content arrives. Press "Render the page" to watch the page stream in: + +<Sandpack> + +```js src/App.js hidden +``` + +```html public/index.html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Streaming SSR + + + +

+ + + +``` + +```js src/index.js +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import { Suspense, use } from 'react'; +import { renderToReadableStream } from 'react-dom/server'; + +let posts = null; + +function Posts() { + const text = use(posts.promise); + return

{text}

; +} + +function ProfilePage() { + return ( + + +

Alice

+

Photographer and traveler.

+ ⌛ Loading posts...

}> + +
+ + + ); +} + +async function main(frame) { + posts = Promise.withResolvers(); + const stream = await renderToReadableStream(); + + // The posts resolve after the shell has streamed, so React + // streams their HTML in and swaps out the fallback. + setTimeout(() => { + posts.resolve( + 'Just got back from two weeks along the coast. The drive ' + + 'was longer than expected, but every stop was worth it. ' + + 'A full write-up and more photos are coming soon.' + ); + }, 1500); + + await flushReadableStreamToFrame(stream, frame); +} + +document.getElementById('render').addEventListener('click', () => { + main(document.getElementById('container')); +}); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + for await (const chunk of readable) { + doc.write(decoder.decode(chunk, { stream: true })); + } + doc.close(); +} +``` + + --- @@ -1992,15 +2253,98 @@ main { ### Resetting Suspense boundaries on navigation {/*resetting-suspense-boundaries-on-navigation*/} -During a Transition, React will avoid hiding already revealed content. However, if you navigate to a route with different parameters, you might want to tell React it is *different* content. You can express this with a `key`: +During a Transition, React avoids hiding already revealed content. However, when you navigate to *different* content, such as another user's profile, you'll want the boundary to show the fallback instead of the previous content. You can express this with a `key`: ```js ``` -Imagine you're navigating within a user's profile page, and something suspends. If that update is wrapped in a Transition, it will not trigger the fallback for already visible content. That's the expected behavior. +With a different `key`, React treats the profiles as different content and resets the Suspense boundary during navigation. The `key` can go on the boundary itself or on a component above it. Suspense-integrated routers should do this automatically. + +In the example below, opening the profile page loads the first profile. Pressing "Bob" navigates to a different profile, and the `key` resets the boundary, so the fallback shows instead of the previous user's bio. Try removing the `key`: the previous bio stays visible while the next one loads: + + + +```js src/App.js hidden +import { useState } from 'react'; +import ProfilePage from './ProfilePage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ; + } + return ( + + ); +} +``` + +```js src/ProfilePage.js active +import { Suspense, useState, startTransition } from 'react'; +import Bio from './Bio.js'; +import { fetchBio } from './data.js'; -However, now imagine you're navigating between two different user profiles. In that case, it makes sense to show the fallback. For example, one user's timeline is *different content* from another user's timeline. By specifying a `key`, you ensure that React treats different users' profiles as different components, and resets the Suspense boundaries during navigation. Suspense-integrated routers should do this automatically. +export default function ProfilePage() { + const [user, setUser] = useState(() => ({ + id: 'alice', + bioPromise: fetchBio('alice'), + })); + function navigate(id) { + startTransition(() => { + setUser({ id, bioPromise: fetchBio(id) }); + }); + } + return ( + <> + + + ⌛ Loading profile...

}> + +
+ + ); +} +``` + +```js src/Bio.js +import { use } from 'react'; + +export default function Bio({ bioPromise }) { + const bio = use(bioPromise); + return

{bio}

; +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. + +export async function fetchBio(userId) { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 1500); + }); + + return userId === 'alice' + ? 'Alice is a photographer and traveler.' + : 'Bob collects vintage synthesizers.'; +} +``` + +```css +button { + margin-right: 8px; +} +``` + +
--- @@ -2029,6 +2373,633 @@ The server HTML will include the loading indicator. It will be replaced by the ` --- +### Waiting for a stylesheet to load {/*waiting-for-a-stylesheet-to-load*/} + +A stylesheet rendered with [`` and a `precedence` prop](/reference/react-dom/components/link#special-rendering-behavior) blocks the Suspense boundary until the stylesheet loads, up to a timeout, so the content doesn't appear unstyled. + +In the example below, the `Card` component renders a stylesheet with `precedence`. Press "Show card": React shows the fallback until the stylesheet has loaded, and then reveals the card with its styles applied. + +For comparison, the second button performs the same update with plain DOM in a separate document, without React. Nothing waits for the stylesheet, so the card's text appears in a fallback font first and then switches: + + + +```js +import { Suspense, useState, startTransition } from 'react'; +import { freshStylesheetUrl } from './styles.js'; +import VanillaCard from './VanillaCard.js'; + +function Card({ href }) { + return ( + <> + +
This card uses a font from the stylesheet.
+ + ); +} + +export default function App() { + const [href, setHref] = useState(null); + return ( + <> + + {href && ( + ⌛ Loading styles...

}> + +
+ )} +
+ + + ); +} +``` + +```js src/VanillaCard.js +import { useRef } from 'react'; +import { freshStylesheetUrl } from './styles.js'; + +export default function VanillaCard() { + const ref = useRef(null); + function show() { + const doc = ref.current.contentWindow.document; + doc.open(); + doc.write(` + +
This card uses a font from the stylesheet.
+ + `); + doc.close(); + } + return ( + <> + +