Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/content/blog/2025/04/21/react-compiler-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/react-compiler/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ React Compiler 包含一条 ESLint 规则,可帮助识别无法优化的代码
npm install -D eslint-plugin-react-hooks@rc
</TerminalBlock>

<<<<<<< HEAD
然后在你的 ESLint 配置中启用编译器规则:

```js {3}
Expand All @@ -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.
>>>>>>> 19c8201d0a1dc45bae45df7e0b5c9a38dda2df12

ESLint 规则将会:
- 识别对 [React 规则](/reference/rules) 的违反情况
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/react-compiler/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
>>>>>>> 19c8201d0a1dc45bae45df7e0b5c9a38dda2df12

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

Expand Down
Loading