React Hooks 规则
注意：此规则包含在以下规则集中：
reactfresh在
deno.json 中启用完整集合{
"lint": {
"rules": {
"tags": ["react"] // ...or "fresh"
}
}
}使用 Deno CLI 启用完整集合
deno lint --rules-tags=react # or ... deno lint --rules-tags=fresh
通过将此规则添加到
deno.json 中的 include 或 exclude 数组中，可以明确地将其包含或排除在当前标签中的规则之外。{
"lint": {
"rules": {
"include": ["react-rules-of-hooks"],
"exclude": ["react-rules-of-hooks"]
}
}
}确保在 React/Preact 组件中正确调用 Hook。它们必须在组件的顶层调用，而不能在条件语句或循环内部调用。
无效示例
// WRONG: Called inside condition
function MyComponent() {
if (condition) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called inside for loop
function MyComponent() {
for (const item of items) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called inside while loop
function MyComponent() {
while (condition) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called after condition
function MyComponent() {
if (condition) {
// ...
}
const [count, setCount] = useState(0);
}
有效示例
function MyComponent() {
const [count, setCount] = useState(0);
}