docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 2774ddfa

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // 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.

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 (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onClear}
+      title="Clear all edits and reload sandbox"
+      type="button">
+      <IconClose className="inline mx-1 relative" />
+      <span className="hidden md:block">Clear</span>
+    </button>
+  );
+}

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,21 +96,21 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     // 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
      * when the iframe loads.
      *
      * 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<string>}) {
         className="px-3 flex items-center justify-end text-start"
         translate="yes">
         <DownloadButton providedFiles={providedFiles} />
-        <ResetButton onReset={handleReset} />
+        <ReloadButton onReload={handleReload} />
+        <ClearButton onClear={handleClear} />
         <OpenInCodeSandboxButton />
         {activeFile.endsWith('.tsx') && (
           <OpenInTypeScriptPlaygroundButton

src/components/MDX/Sandpack/ReloadButton.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconRestart} from '../../Icon/IconRestart';
+export interface ReloadButtonProps {
+  onReload: () => void;
+}
+
+export function ReloadButton({onReload}: ReloadButtonProps) {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onReload}
+      title="Keep your edits and reload sandbox"
+      type="button">
+<<<<<<< HEAD:src/components/MDX/Sandpack/ResetButton.tsx
+      <IconRestart className="inline mx-1 relative" /> 重置
+=======
+      <IconRestart className="inline mx-1 relative" />
+      <span className="hidden md:block">Reload</span>
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf:src/components/MDX/Sandpack/ReloadButton.tsx
+    </button>
+  );
+}

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
 <TerminalBlock>
-{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 pnpm
 <TerminalBlock>
-{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 yarn
 <TerminalBlock>
-{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 ```js

src/content/learn/react-compiler/installation.md

@@ -176,6 +176,7 @@ React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码
 npm install -D eslint-plugin-react-hooks@rc
 </TerminalBlock>
 
+<<<<<<< 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) 的违反情况

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 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。