From 3c805e7da3ae1c856d9cecc31f2a0385ae130303 Mon Sep 17 00:00:00 2001 From: Kafuu-Chinocya <38375027+Kafuu-Chinocya@users.noreply.github.com> Date: Tue, 15 Apr 2025 15:59:36 +0800 Subject: [PATCH 01/13] fix(reference): missing parameter in hydrateRoot (#7724) --- src/content/reference/react-dom/client/hydrateRoot.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 99190b03a7..b74e2c38ee 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -378,12 +378,13 @@ It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: -```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]] +```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]] import { hydrateRoot } from "react-dom/client"; +import App from "./App.js"; import { reportCaughtError } from "./reportError"; const container = document.getElementById("root"); -const root = hydrateRoot(container, { +const root = hydrateRoot(container, , { onCaughtError: (error, errorInfo) => { if (error.message !== "Known error") { reportCaughtError({ From 84261aa85c3467c4594715b41a8498c7f7772a54 Mon Sep 17 00:00:00 2001 From: Valentin <3774962+val1984@users.noreply.github.com> Date: Tue, 15 Apr 2025 17:13:42 +0200 Subject: [PATCH 02/13] Update versions to mention the latest version: 19.1 (#7739) GitHub Copilot web search replies that React latest version is 19.0 because 19.1 is not present in this page --- src/content/versions.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/versions.md b/src/content/versions.md index 8530f63247..54bc309f1d 100644 --- a/src/content/versions.md +++ b/src/content/versions.md @@ -11,7 +11,7 @@ The React docs at [react.dev](https://react.dev) provide documentation for the l We aim to keep the docs updated within major versions, and do not publish versions for each minor or patch version. When a new major is released, we archive the docs for the previous version as `x.react.dev`. See our [versioning policy](/community/versioning-policy) for more info. You can find an archive of previous major versions below. -## Latest version: 19.0 {/*latest-version*/} +## Latest version: 19.1 {/*latest-version*/} - [react.dev](https://react.dev) {/*docs-19*/} @@ -51,6 +51,7 @@ 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.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025) - [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024) ### React 18 {/*react-18*/} From 947681ea20f278c64200ea1107062765948f5a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Kaya?= Date: Tue, 15 Apr 2025 15:25:35 +0000 Subject: [PATCH 03/13] docs: fix a typo in the docs (#7736) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: “Clatron” <“bariskaya1516@gmail.com”> --- src/content/learn/creating-a-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index fc6c956d4a..e51ec8b639 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -106,7 +106,7 @@ If your app has constraints not well-served by existing frameworks, you prefer t Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems. -If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a built tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). +If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). ----- From 4bea66b021679e307f3ccb05fdd8fbdf80dd04d7 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Wed, 16 Apr 2025 23:09:11 +0300 Subject: [PATCH 04/13] Change the word 'Function' to 'Component' (#7741) * Change the word 'Function' to 'Component' * Trigger actions --- src/content/reference/rsc/server-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index d296938943..9cfcdb33bd 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -54,7 +54,7 @@ function EmptyNote () { } ``` -When React renders the `EmptyNote` Server Function, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided: +When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided: ```js {5} "use client"; From 4c54ac95800fe1c8b9c2fe9c9926ae8de91e1f18 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Apr 2025 15:35:55 -0400 Subject: [PATCH 05/13] Fix missing Sunsetting CRA entry in sidebar (#7755) This was missed in the last blog post. Also fixed the incorrect date. --- src/content/blog/index.md | 4 ++-- src/sidebarBlog.json | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index f7bbe76f3d..f74a57ba62 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,7 +4,7 @@ title: React Blog -This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. +This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. @@ -12,7 +12,7 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
- + Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ... diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 5562a5a6ca..5679880230 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -11,6 +11,13 @@ "path": "/blog", "skipBreadcrumb": true, "routes": [ + { + "title": "Sunsetting Create React App", + "titleForHomepage": "Sunsetting Create React App", + "icon": "blog", + "date": "February 14, 2025", + "path": "/blog/2025/02/14/sunsetting-create-react-app" + }, { "title": "React 19", "titleForHomepage": "React 19", From 3a88efd82ac6e3e5a2bc31430fbe20c07cfb6ef2 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Apr 2025 16:15:49 -0400 Subject: [PATCH 06/13] Compiler blog post (#7756) Blog post for Compiler RC --- next-env.d.ts | 3 +- .../blog/2025/04/21/react-compiler-rc.md | 124 ++++++++++++++++++ src/content/blog/index.md | 7 + src/content/learn/react-compiler.md | 8 +- src/sidebarBlog.json | 7 + 5 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 src/content/blog/2025/04/21/react-compiler-rc.md diff --git a/next-env.d.ts b/next-env.d.ts index 3cd7048ed9..52e831b434 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,5 @@ /// /// -/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md new file mode 100644 index 0000000000..ab4790129e --- /dev/null +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -0,0 +1,124 @@ +--- +title: "React Compiler RC" +author: Lauren Tan and Mofei Zhang +date: 2025/04/21 +description: We are releasing the compiler's first Release Candidate (RC) today. + +--- + +April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei). + +--- + + + +The React team is excited to share new updates: + + + +1. We're publishing React Compiler RC today, in preparation of the compiler's stable release. +2. We're simplifying your eslint setup by merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`. +3. We're working with the swc and oxc teams to add plugins to allow for Babel-free build pipelines. + +--- + +[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release. + +We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to use in production for all React users. + +## Use React Compiler RC today {/*use-react-compiler-rc-today*/} +To install the RC: + +npm + +{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`} + + +pnpm + +{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`} + + +yarn + +{`yarn add --dev --exact babel-plugin-react-compiler@rc`} + + +As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs. + +We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release. + +You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler). + +### Backwards Compatibility {/*backwards-compatibility*/} +As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). + +## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} +To install eslint-plugin-react-hooks: + +npm + +{`npm install --save-dev eslint-plugin-react-hooks@^6.0.0`} + + +pnpm + +{`pnpm add --save-dev eslint-plugin-react-hooks@^6.0.0`} + + +yarn + +{`yarn add --dev eslint-plugin-react-hooks@^6.0.0`} + + +`eslint-plugin-react-hooks` 5.2.0 has been ported to TypeScript, which allowed us to improve the type-safety of the plugin. In the 6.0.0 release of the ESLint plugin, the compiler lint rule has now been merged in. If you were previously using `eslint-plugin-react-compiler`, this means you can now use a single ESLint plugin in your codebase. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! + +```js +// eslint.config.js +import * as reactHooks from 'eslint-plugin-react-hooks'; + +export default [ + // Flat Config (eslint 9+) + reactHooks.configs.recommended, + + // Legacy Config + reactHooks.configs['recommended-latest'] +]; +``` + +The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today. + +## swc and oxc support (experimental) {/*swc-and-oxc-support-experimental*/} +We have also been collaborating with Kang Dongyoong ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding support for React Compiler as an swc plugin. As part of the RC release, you can integrate the compiler into your [Next.js app with swc](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler) instead of babel. We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048), which should allow more people to use the compiler if they have already migrated off of Babel. + +Next.js users can upgrade to [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to try this out. If you have already enabled the compiler in your Next.js's config, swc support will be enabled automatically. + +Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. + +## Upgrading React Compiler {/*upgrading-react-compiler*/} +React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. + +However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases. For example you may have an effect that runs in response to some value changing (breaks the rules of React). + +In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. + +If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.0.0`) rather than a SemVer range (eg `^19.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. + +## Roadmap to Stable {/*roadmap-to-stable*/} +*This is not a final roadmap, and is subject to change.* + +After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler. + +* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers. +* ✅ Public Beta: Available today, for feedback from library authors. +* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. +* General Availability: After final feedback period from the community. + +Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. + +## Feedback {/*feedback*/} +During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions). + +--- + +Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://twitter.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index f74a57ba62..4707e5f48e 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -12,6 +12,13 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
+ + +We are releasing the compiler's first Release Candidate (RC) today. ... + + + + Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ... diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 7c46673e7a..143c859a1d 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -6,10 +6,6 @@ title: React Compiler This page will give you an introduction to React Compiler and how to try it out successfully. - -These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable. - - * Getting started with the compiler @@ -19,9 +15,9 @@ These docs are still a work in progress. More documentation is available in the -React Compiler is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the [Rules of React](/reference/rules). +React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to use the compiler. -The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`. +The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`. React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 5679880230..33a4747662 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -11,6 +11,13 @@ "path": "/blog", "skipBreadcrumb": true, "routes": [ + { + "title": "React Compiler RC", + "titleForHomepage": "React Compiler RC", + "icon": "blog", + "date": "April 21, 2025", + "path": "/blog/2025/04/21/react-compiler-rc" + }, { "title": "Sunsetting Create React App", "titleForHomepage": "Sunsetting Create React App", From c1e568153e661d7236c5d6070681a0573fad1ec4 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Apr 2025 17:03:33 -0400 Subject: [PATCH 07/13] Compiler blog post edits (#7758) Tweaks to the post. --- .../2024/10/21/react-compiler-beta-release.md | 8 +++++++ .../blog/2025/04/21/react-compiler-rc.md | 24 ++++++++++--------- 2 files changed, 21 insertions(+), 11 deletions(-) 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 f5a870b223..58e6b24aa4 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 @@ -10,6 +10,14 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). --- + + +### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/} + +Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details. + + + The React team is excited to share new updates: diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index ab4790129e..fe9e3c6c14 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -17,8 +17,8 @@ The React team is excited to share new updates: 1. We're publishing React Compiler RC today, in preparation of the compiler's stable release. -2. We're simplifying your eslint setup by merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`. -3. We're working with the swc and oxc teams to add plugins to allow for Babel-free build pipelines. +2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`. +3. We've added support for swc and are working with oxc to support Babel-free builds. --- @@ -54,25 +54,25 @@ You can find more details on using the Compiler in [our docs](https://react.dev/ As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -To install eslint-plugin-react-hooks: +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@^6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! + +To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@^6.0.0`} +{`npm install --save-dev eslint-plugin-react-hooks@^6.0.0-rc.1`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@^6.0.0`} +{`pnpm add --save-dev eslint-plugin-react-hooks@^6.0.0-rc.1`} yarn -{`yarn add --dev eslint-plugin-react-hooks@^6.0.0`} +{`yarn add --dev eslint-plugin-react-hooks@^6.0.0-rc.1`} -`eslint-plugin-react-hooks` 5.2.0 has been ported to TypeScript, which allowed us to improve the type-safety of the plugin. In the 6.0.0 release of the ESLint plugin, the compiler lint rule has now been merged in. If you were previously using `eslint-plugin-react-compiler`, this means you can now use a single ESLint plugin in your codebase. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! - ```js // eslint.config.js import * as reactHooks from 'eslint-plugin-react-hooks'; @@ -88,12 +88,14 @@ export default [ The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today. -## swc and oxc support (experimental) {/*swc-and-oxc-support-experimental*/} -We have also been collaborating with Kang Dongyoong ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding support for React Compiler as an swc plugin. As part of the RC release, you can integrate the compiler into your [Next.js app with swc](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler) instead of babel. We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048), which should allow more people to use the compiler if they have already migrated off of Babel. +## swc support (experimental) {/*swc-support-experimental*/} +React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild. + +In addition to those tools, we have been collaborating with Kang Dongyoong ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. As part of the RC release, you can now integrate the compiler into your [Next.js app with swc](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler) instead of Babel. Next.js users can upgrade to [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to try this out. If you have already enabled the compiler in your Next.js's config, swc support will be enabled automatically. -Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. +Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. ## Upgrading React Compiler {/*upgrading-react-compiler*/} React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. From 663df77853a11e52708341003fc67e750846bfd1 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Apr 2025 17:03:41 -0400 Subject: [PATCH 08/13] React compiler doc updates (#7759) * Compiler blog post edits Tweaks to the post. * React compiler doc updates --- src/content/learn/react-compiler.md | 56 ++++++++--------------------- 1 file changed, 14 insertions(+), 42 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 143c859a1d..9d4e19d210 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -15,25 +15,25 @@ This page will give you an introduction to React Compiler and how to try it out -React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to use the compiler. +React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`. -React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. +React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. -The compiler also includes an [ESLint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. +eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. -The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta: +The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC: -npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta +{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`} Or, if you're using Yarn: -yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta +{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`} If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions. @@ -112,7 +112,7 @@ So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different ### Should I try out the compiler? {/*should-i-try-out-the-compiler*/} -Please note that the compiler is still in Beta and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). +The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). **You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better. @@ -120,43 +120,15 @@ Please note that the compiler is still in Beta and has many rough edges. While i In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. -### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/} +### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/} -React Compiler also powers an ESLint plugin. The ESLint plugin can be used **independently** of the compiler, meaning you can use the ESLint plugin even if you don't use the compiler. +React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1. -npm install -D eslint-plugin-react-compiler@beta +{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`} -Then, add it to your ESLint config: - -```js -import reactCompiler from 'eslint-plugin-react-compiler' - -export default [ - { - plugins: { - 'react-compiler': reactCompiler, - }, - rules: { - 'react-compiler/react-compiler': 'error', - }, - }, -] -``` - -Or, in the deprecated eslintrc config format: - -```js -module.exports = { - plugins: [ - 'eslint-plugin-react-compiler', - ], - rules: { - 'react-compiler/react-compiler': 'error', - }, -} -``` +See our [editor setup](/learn/editor-setup#linting) guide for more details. The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. @@ -190,7 +162,7 @@ If you're starting a new project, you can enable the compiler on your entire cod React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. -npm install react-compiler-runtime@beta +{`npm install react-compiler-runtime@rc`} You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: @@ -225,7 +197,7 @@ Similarly to apps, it is not necessary to fully compile 100% of your components ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler@beta +{`npm install babel-plugin-react-compiler@rc`} The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. @@ -280,7 +252,7 @@ Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/nex Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: -npm install vite-plugin-babel +{`npm install vite-plugin-babel`} ```js {2,14} From 740016e4dea7e518bd045309bc3e828cc2a787a4 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Apr 2025 18:00:39 -0400 Subject: [PATCH 09/13] More compiler blog post tweaks (#7760) More small tweaks. --- src/content/blog/2025/04/21/react-compiler-rc.md | 16 ++++++++-------- src/content/blog/index.md | 3 +-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index fe9e3c6c14..55c238a93c 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -24,7 +24,7 @@ The React team is excited to share new updates: [React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release. -We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to use in production for all React users. +We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production. ## Use React Compiler RC today {/*use-react-compiler-rc-today*/} To install the RC: @@ -50,7 +50,10 @@ We have also heard from the community that the ref-in-render validation sometime You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler). -### Backwards Compatibility {/*backwards-compatibility*/} +## Feedback {/*feedback*/} +During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions). + +## Backwards Compatibility {/*backwards-compatibility*/} As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} @@ -100,11 +103,11 @@ Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vit ## Upgrading React Compiler {/*upgrading-react-compiler*/} React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. -However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases. For example you may have an effect that runs in response to some value changing (breaks the rules of React). +However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing. In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. -If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.0.0`) rather than a SemVer range (eg `^19.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. +If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. ## Roadmap to Stable {/*roadmap-to-stable*/} *This is not a final roadmap, and is subject to change.* @@ -118,9 +121,6 @@ After a period of final feedback from the community on the RC, we plan on a Stab Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. -## Feedback {/*feedback*/} -During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions). - --- -Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://twitter.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post. +Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 4707e5f48e..fadb952437 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -14,11 +14,10 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account -We are releasing the compiler's first Release Candidate (RC) today. ... +We are releasing the compiler's first Release Candidate (RC) today. - Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ... From aac5e9f5d47945a1582a99b8f61793766ab323b4 Mon Sep 17 00:00:00 2001 From: Xleine Date: Tue, 22 Apr 2025 13:38:13 +0800 Subject: [PATCH 10/13] fix conflict --- src/content/blog/index.md | 13 +--- src/content/learn/creating-a-react-app.md | 4 -- src/content/learn/react-compiler.md | 74 ++--------------------- src/content/versions.md | 11 +--- 4 files changed, 9 insertions(+), 93 deletions(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index ffb33ff378..5fc7160232 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,30 +4,21 @@ title: React Blog -<<<<<<< HEAD 这个博客是 React 团队更新的官方来源。任何重要的内容，包括发布说明或弃用通知，都会首先在这里发布。 -======= -This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. - -You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 你也可以在 Bluesky 上关注 [@react.dev](https://bsky.app/profile/react.dev)，或者在 Twitter 上关注 [@reactjs](https://twitter.com/reactjs)。不过只要你阅读这个博客，就不会错过任何重要内容。
-<<<<<<< HEAD - -======= We are releasing the compiler's first Release Candidate (RC) today. +我们今天将发布 React Compiler 的第一个候选发布版（RC）。 - ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 + 今日起，我们将正式弃用 Create React App 作为新应用的推荐工具，并建议现有应用迁移至框架或构建工具（如 Vite、Parcel 和 RSBuild）。我们还提供了相关文档用于这些情况：你的项目不适合使用框架、你想要构建自己的框架，或者只是想通过从零开始构建一个 React 应用来了解 React 的工作原理等等…… diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index aa11dcaee9..759b3b69cf 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -106,11 +106,7 @@ Next.js 的 App Router 还集成了 [使用 Suspense 的数据获取](/blog/2022 从零开始可以给你更多的灵活性，但同时也要求你必须自己选择用于路由、数据获取以及其他常见使用模式的工具。这更像自己构建一个框架，而不是使用一个已经存在的框架。[我们推荐的框架](#full-stack-frameworks) 为这些问题提供了内置的解决方案。 -<<<<<<< HEAD 如果你想构建自己的解决方案，请参阅我们的 [从零构建一个 React 应用](/learn/build-a-react-app-from-scratch) 指南，该指南提供了如何使用 [Vite](https://vite.dev/)， [Parcel](https://parceljs.org/)，或 [RSbuild](https://rsbuild.dev/) 等构建工具设置新 React 项目的说明。 -======= -If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 ----- diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 4f842eabbc..55c8e9ea50 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -6,13 +6,6 @@ title: React Compiler 本页面将为你介绍新的 React Compiler，以及如何成功试用。 -<<<<<<< HEAD - -这些文档仍在不断完善中。更多文档可在 [React Compiler 工作组代码库](https://github.com/reactwg/react-compiler/discussions) 中找到，并在这些文档更加稳定时被整合进来。 - - -======= ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 * 开始使用 React Compiler @@ -22,10 +15,9 @@ title: React Compiler -<<<<<<< HEAD -React Compiler 是一个处于 Beta 阶段的新的编译器，我们将其开源以获取社区的早期反馈。虽然Meta 等公司已经在生产中使用它，但是能否在你的应用程序中使用它取决于代码库的健康状态以及你遵守 [React 规则](/reference/rules) 的程度。 +React Compiler 是一个处于 RC 阶段的新的编译器，我们将其开源以获取社区反馈。现在我们建议所有人都使用编译器。 -最新的 Beta 版本发布于 `@beta` 标签，每日实验版本发布于 `@experimental` 标签。 +最新的 RC 版本发布于 `@rc` 标签，每日实验版本发布于 `@experimental` 标签。 React Compiler 是一个新编译器，我们将其开源以获取社区的早期反馈。它是一个仅在构建时使用的工具，可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用，并且了解 [React 规则](/reference/rules)，因此你无需重写任何代码即可使用它。 @@ -34,18 +26,6 @@ React Compiler 是一个新编译器，我们将其开源以获取社区的早 编译器还包括一个 [ESLint 插件](#installing-eslint-plugin-react-compiler)，可以在你的编辑器中直接显示编译器的分析结果。**我们强烈建议大家使用 linter。** 不过 linter 并不需要安装编译器，因此即使你还没有准备好尝试编译器也可以使用它。 编译器目前处于 `beta` 阶段，并且可以在 React 17+ 应用程序和库上使用。安装方式如下： -======= -React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback. - -The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`. - - -React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. - -eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. - -The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC: ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 {`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`} @@ -133,11 +113,7 @@ function TableContainer({ items }) { ### 我应该尝试一下编译器吗？ {/*should-i-try-out-the-compiler*/} -<<<<<<< HEAD -请注意，编译器仍处于 Beta 阶段，存在许多不完善之处。虽然它已经在 Meta 等公司的生产环境中使用过，但将编译器应用于你的应用程序生产环境将取决于你的代码库的健康状况以及你是否遵循了 [React 的规则](/reference/rules)。 -======= -The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 +请注意，编译器处于 RC 阶段，并已在生产中进行了广泛测试。虽然它已经在 Meta 等公司的生产环境中使用过，但将编译器应用于你的应用程序生产环境将取决于你的代码库的健康状况以及你是否遵循了 [React 的规则](/reference/rules)。 **你现在不必急着使用编译器。在采用它之前等到它达到稳定版本是可以的。** 然而，我们确实赞赏在你的应用程序中进行小型实验，以便你可以向我们 [提供反馈](#reporting-issues)，帮助使编译器更好。 @@ -145,53 +121,15 @@ The compiler is now in RC and has been tested extensively in production. While i 除了这些文档之外，我们还建议查看 [React Compiler 工作组](https://github.com/reactwg/react-compiler)，以获取有关编译器的更多信息和讨论。 -<<<<<<< HEAD -### 安装 eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/} - -React Compiler 还为 ESLint 插件提供支持。ESLint 插件可以**独立**于编译器使用，这意味着即使你不使用编译器，也可以使用 ESLint 插件。 -======= -### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/} +### 安装 eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/} -React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1. ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 +React Compiler 还支持作为 ESLint 插件。你可以通过安装 eslint-plugin-react-hooks@^6.0.0-rc.1 来使用它。 {`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`} -<<<<<<< HEAD -然后，将其添加到你的 ESLint 配置中： - -```js -import reactCompiler from 'eslint-plugin-react-compiler' - -export default [ - { - plugins: { - 'react-compiler': reactCompiler, - }, - rules: { - 'react-compiler/react-compiler': 'error', - }, - }, -] -``` - -或者使用已弃用的 eslintrc 配置格式： - -```js -module.exports = { - plugins: [ - 'eslint-plugin-react-compiler', - ], - rules: { - 'react-compiler/react-compiler': 'error', - }, -} -``` -======= -See our [editor setup](/learn/editor-setup#linting) guide for more details. ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 +查看 [编辑器设置](/learn/editor-setup#linting) 指南来了解更多信息。 ESLint 插件将在编辑器中显示任何违反 React 规则的行为。当它这样做时，这意味着编译器跳过了优化该组件或钩子。这是完全可以的，编译器可以恢复并继续优化代码库中的其他组件。 diff --git a/src/content/versions.md b/src/content/versions.md index a45e206b7b..a1fd732b5b 100644 --- a/src/content/versions.md +++ b/src/content/versions.md @@ -10,13 +10,8 @@ React 文档位于 [react.dev](https://react.dev)，提供最新版本 React 的 我们致力于在主要版本内保持文档的更新，并不会为每个次要版本或补丁版本发布单独的文档版本。当一个新的主要版本发布时，我们会将前一个版本的文档存档为 `x.react.dev`。有关更多信息，请参阅我们的[版本控制政策](/community/versioning-policy)。 -<<<<<<< HEAD 你可以在下方找到以前主要版本的存档。 -## 最新版本：19.0 {/*latest-version*/} -======= -You can find an archive of previous major versions below. -## Latest version: 19.1 {/*latest-version*/} ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 +## 最新版本：19.1 {/*latest-version*/} - [react.dev](https://react.dev) {/*docs-19*/} @@ -55,12 +50,8 @@ You can find an archive of previous major versions below. - [React Compiler Case Studies](https://www.youtube.com/watch?v=lvhPq5chokM) - [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI) -<<<<<<< HEAD **发布版本** -======= -**Releases** - [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025) ->>>>>>> 740016e4dea7e518bd045309bc3e828cc2a787a4 - [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024) ### React 18 {/*react-18*/} From 43af5bd4ab481be234aa9c5c9ab166d85deb0623 Mon Sep 17 00:00:00 2001 From: Xleine Date: Tue, 22 Apr 2025 13:40:17 +0800 Subject: [PATCH 11/13] Update src/content/blog/index.md --- src/content/blog/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 5fc7160232..edde294551 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -13,7 +13,6 @@ title: React Blog -We are releasing the compiler's first Release Candidate (RC) today. 我们今天将发布 React Compiler 的第一个候选发布版（RC）。 From 304fa8ab1e6939f14115d3a7f505f6f4dba333f8 Mon Sep 17 00:00:00 2001 From: Xleine Date: Tue, 22 Apr 2025 13:42:49 +0800 Subject: [PATCH 12/13] Update src/content/blog/2024/10/21/react-compiler-beta-release.md --- src/content/blog/2024/10/21/react-compiler-beta-release.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a50120e922..2a71f6e64a 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 @@ -14,7 +14,7 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). ### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/} -Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details. +有关详细信息，请参阅 [RC 博客文章](/blog/2025/04/21/react-compiler-rc)。 From 66a166a6848541fc03393c531ac8eb7f5ca2c383 Mon Sep 17 00:00:00 2001 From: Xleine Date: Tue, 22 Apr 2025 13:43:42 +0800 Subject: [PATCH 13/13] Update src/content/blog/2024/10/21/react-compiler-beta-release.md --- src/content/blog/2024/10/21/react-compiler-beta-release.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2a71f6e64a..04f77ab3ae 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 @@ -12,7 +12,7 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/} +### React Compiler 现在处于 RC 版本！{/*react-compiler-is-now-in-rc*/} 有关详细信息，请参阅 [RC 博客文章](/blog/2025/04/21/react-compiler-rc)。