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 function ReloadButton({onReload}: ReloadButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
deleted file mode 100644
index 7d99ffea0d..0000000000
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-import * as React from 'react';
-import {IconRestart} from '../../Icon/IconRestart';
-export interface ResetButtonProps {
- onReset: () => void;
-}
-
-export function ResetButton({onReset}: ResetButtonProps) {
- return (
-
- );
-}
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
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 22684cf3fa..eaf481a6d5 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -176,6 +176,7 @@ React Compiler 包含一条 ESLint 规则,可帮助识别无法优化的代码
npm install -D eslint-plugin-react-hooks@rc
+<<<<<<< HEAD
然后在你的 ESLint 配置中启用编译器规则:
```js {3}
@@ -186,6 +187,9 @@ module.exports = {
},
};
```
+=======
+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.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
ESLint 规则将会:
- 识别对 [React 规则](/reference/rules) 的违反情况
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index 48b56d30b0..69d658ac8d 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -154,7 +154,11 @@ Next.js 用户可以通过使用 [v15.3.1](https://github.com/vercel/next.js/rel
## 关于 useMemo、useCallback 和 React.memo 我应该怎么做? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+<<<<<<< HEAD
如果你正在使用 React 编译器,可以移除 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo)。React 编译器能够比使用这些 Hook 更精确和细致地添加自动记忆化功能。如果你选择保留手动记忆化,React 编译器会分析它们,并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致,编译器将选择放弃优化该组件。
+=======
+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.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
这样做是出于谨慎考虑,因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如,为了防止无限循环,你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则,但因为编译器自动移除手动记忆化可能会有潜在危险,所以会直接放弃优化。你应该手动移除自己的手动记忆化代码,并验证应用是否仍能按预期运行。