From 9a370f2cf4598d51511db2942fcf8d6e7f1d3007 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 16:08:37 -0400 Subject: [PATCH 01/34] [compiler] Tweak intro section on manual memo guidance (#7953) The previous sentence "If you are using React Compiler, useMemo, useCallback, and React.memo can be removed." was coming off a bit too strong and makes it incorrectly seem like the manual memos and compiler memos are 1:1. Removing the sentence doesn't take anything away from this paragraph, so let's remove it to reduce confusion. --- src/content/learn/react-compiler/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 440c66ab61..96fdf70db8 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -154,7 +154,7 @@ Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https ## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -If you are using React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. +React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected. From 94a116476c58897cd0d4745ef8bab6b2621ca38d Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 18:06:22 -0400 Subject: [PATCH 02/34] [compiler][ez] Reference rc tag for install instructions (#7955) Updates our previous RC blogpost to point people to the `rc` tag, not the specific rc version --- src/content/blog/2025/04/21/react-compiler-rc.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 ecbbb87471..2ebbf3baeb 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`npm install --save-dev eslint-plugin-react-hooks@rc`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`pnpm add --save-dev eslint-plugin-react-hooks@rc`} yarn -{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`yarn add --dev eslint-plugin-react-hooks@rc`} ```js From 19c8201d0a1dc45bae45df7e0b5c9a38dda2df12 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 18:14:32 -0400 Subject: [PATCH 03/34] [compiler] Update docs on eslint-plugin-react-hooks installation (#7956) The compiler rule is now enabled by default in 6.0.0-rc.2, so there is no longer a need to manually enable the compiler rule in user's eslint configs. --- src/content/learn/react-compiler/installation.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 3606c9c6dd..a40b1f5af1 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -176,16 +176,7 @@ Install the ESLint plugin: npm install -D eslint-plugin-react-hooks@rc -Then enable the compiler rule in your ESLint configuration: - -```js {3} -// .eslintrc.js -module.exports = { - rules: { - 'react-hooks/react-compiler': 'error', - }, -}; -``` +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 rule is enabled by default in the latest RC, so no additional configuration is needed. The ESLint rule will: - Identify violations of the [Rules of React](/reference/rules) From 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf Mon Sep 17 00:00:00 2001 From: Ricky Date: Fri, 29 Aug 2025 11:00:24 -0400 Subject: [PATCH 04/34] Add reload button, rename reset to clear (#7954) --- next-env.d.ts | 3 ++- src/components/MDX/Sandpack/ClearButton.tsx | 22 +++++++++++++++++++ src/components/MDX/Sandpack/NavigationBar.tsx | 16 ++++++++------ .../{ResetButton.tsx => ReloadButton.tsx} | 13 ++++++----- 4 files changed, 40 insertions(+), 14 deletions(-) create mode 100644 src/components/MDX/Sandpack/ClearButton.tsx rename src/components/MDX/Sandpack/{ResetButton.tsx => ReloadButton.tsx} (53%) diff --git a/next-env.d.ts b/next-env.d.ts index 52e831b434..3cd7048ed9 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx new file mode 100644 index 0000000000..868f9fb660 --- /dev/null +++ b/src/components/MDX/Sandpack/ClearButton.tsx @@ -0,0 +1,22 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {IconClose} from '../../Icon/IconClose'; +export interface ClearButtonProps { + onClear: () => void; +} + +export function ClearButton({onClear}: ClearButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index bf2c3186c3..d115868dd1 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -17,7 +17,8 @@ import { useSandpackNavigation, } from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; +import {ReloadButton} from './ReloadButton'; +import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; @@ -95,7 +96,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // Note: in a real useEvent, onContainerResize would be omitted. }, [isMultiFile, onContainerResize]); - const handleReset = () => { + const handleClear = () => { /** * resetAllFiles must come first, otherwise * the previous content will appear for a second @@ -103,13 +104,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ - if ( - sandpack.editorState === 'dirty' && - confirm('Reset all your edits too?') - ) { + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { className="px-3 flex items-center justify-end text-start" translate="yes"> - + + {activeFile.endsWith('.tsx') && ( void; +export interface ReloadButtonProps { + onReload: () => void; } -export function ResetButton({onReset}: ResetButtonProps) { +export function ReloadButton({onReload}: ReloadButtonProps) { return ( ); } From ddfcf6e8a38f21c3d47cfed2822cd0bc41d68bfd Mon Sep 17 00:00:00 2001 From: SeungMin Shin Date: Tue, 2 Sep 2025 03:32:29 +0900 Subject: [PATCH 05/34] fix: typo in component style documentation (#7925) --- src/content/reference/react-dom/components/style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index b98b6088c0..561c207d1d 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -49,7 +49,7 @@ React can move `