docs(en): merging all conflicts

Author: docschina-bot

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>
+>>>>>>> bb998fdef6837209b7fd8415bad95b39fb20a054:src/components/MDX/Sandpack/ReloadButton.tsx
+    </button>
+  );
+}

src/components/MDX/Sandpack/ResetButton.tsx

@@ -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/blog/2025/04/21/react-compiler-rc.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.
+>>>>>>> bb998fdef6837209b7fd8415bad95b39fb20a054
 
 ESLint 规则将会：
 - 识别对 [React 规则](/reference/rules) 的违反情况

src/content/learn/react-compiler/installation.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.
+>>>>>>> bb998fdef6837209b7fd8415bad95b39fb20a054
 
 这样做是出于谨慎考虑，因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如，为了防止无限循环，你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。
 

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

@@ -49,7 +49,11 @@ React 可以将 `<style>` 组件移动到文档的 `<head>` 中，去重相同
 
 请提供 `href` 和 `precedence` 属性以选择此行为。如果样式表具有相同的 `href`，React 将对样式去重。优先级属性告诉 React 在文档的 `<head>` 中排列 `<style>` DOM 节点的位置，从而确定哪个样式表可以覆盖另一个。
 
+<<<<<<< HEAD
 这种特殊处理带来两个注意事项：
+=======
+This special treatment comes with three caveats:
+>>>>>>> bb998fdef6837209b7fd8415bad95b39fb20a054
 
 * 在样式被渲染后，React 将忽略属性的更改（React 在开发环境中会对这种情况发出警告）。
 * 当设置了 `precedence` 属性的时候，React 会丢弃除了 `href` 和 `precedence` 的之外所有无关属性。

src/content/reference/react-dom/components/style.md

@@ -195,7 +195,7 @@ function UpdateName() {
 
 When using `useActionState` with Server Functions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
 
-For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+For more, see the docs for [`useActionState`](/reference/react/useActionState).
 
 ### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
 
@@ -219,4 +219,4 @@ function UpdateName() {
 
 When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
 
-For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+For more, see the docs for [`useActionState`](/reference/react/useActionState).