react/set-state-in-effect 正确性
功能
禁止在 effect 主体内同步调用 setState。
由 React Compiler 提供支持，该编译器每个文件运行一次，并与其他 React Compiler 规则共享。移植自 react-hooks/set-state-in-effect。
为什么这不好？
在 effect 中同步调用 setState 会触发立即的额外渲染过程，并且通常表示非局部派生数据、派生事件模式或不正确的外部数据同步。可以根据 props 和 state 计算出的值应在渲染期间计算。
示例
此规则的错误代码示例：
jsx
import { useEffect, useState } from "react";
function Component() {
const [state, setState] = useState(0);
useEffect(() => {
setState((s) => s + 1);
});
return state;
}此规则的正确代码示例：
jsx
function Component({ value }) {
const doubled = value * 2;
return <div>{doubled}</div>;
}使用方法
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/set-state-in-effect": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/set-state-in-effect": "error",
},
});bash
oxlint --deny react/set-state-in-effect --react-plugin版本
此规则在 vnext 中添加。