react-hooks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Hooks Skill

React Hooks 技能指南

Handles common React hook patterns and violations across the codebase.

处理代码库中常见的React Hook使用模式及违规问题。

Capabilities

核心能力

Rules of Hooks violations: Early returns before hook calls, conditional hooks
useEffect dependency issues: Missing/stale dependencies, infinite loops
Hook ordering problems: Hooks called in conditional order, inconsistent hook sequence
Context hook patterns: Proper use of useContext, avoiding unnecessary context re-renders
Custom hook extraction: Safe creation of custom hooks for reusable logic

Hook规则违规：在Hook调用前提前返回、条件式调用Hook
useEffect依赖项问题：依赖项缺失/过时、无限循环
Hook调用顺序问题：按条件顺序调用Hook、Hook序列不一致
Context Hook使用模式：正确使用useContext、避免不必要的Context重渲染
自定义Hook提取：安全创建可复用逻辑的自定义Hook

Key Patterns

关键修复模式

Pattern 1: Early Returns Before Hooks (⚠️ FATAL)

模式1：在Hook调用前提前返回（⚠️ 严重错误）

typescript

// WRONG - return before hooks
if (!isAuthenticated) {
  return <Login />;  // ❌ Hook call below is unreachable sometimes
}
const user = useUser();  // VIOLATION

// RIGHT - hooks always execute
const user = useUser();
if (!isAuthenticated) {
  return <Login />;
}

typescript

// 错误写法 - 在Hook调用前返回
if (!isAuthenticated) {
  return <Login />;  // ❌ 下方的Hook调用有时会无法执行
}
const user = useUser();  // 违规

// 正确写法 - Hook始终会执行
const user = useUser();
if (!isAuthenticated) {
  return <Login />;
}

Pattern 2: useEffect Dependency Problems

模式2：useEffect依赖项问题

typescript

// WRONG - missing dependency
const context = useContext(MyContext);
useEffect(() => {
  doSomething(context);
}, []);  // ❌ Missing `context`

// RIGHT - include all dependencies
useEffect(() => {
  doSomething(context);
}, [context]);

typescript

// 错误写法 - 缺失依赖项
const context = useContext(MyContext);
useEffect(() => {
  doSomething(context);
}, []);  // ❌ 缺失`context`

// 正确写法 - 包含所有依赖项
useEffect(() => {
  doSomething(context);
}, [context]);

Pattern 3: Infinite Loop from Context Object

模式3：Context对象导致的无限循环

typescript

// WRONG - context object changes on every render
const Provider = ({ children }) => {
  const value = { user: currentUser };  // New object every render
  return (
    <MyContext.Provider value={value}>  // ❌ Causes infinite loop
      {children}
    </MyContext.Provider>
  );
};

// RIGHT - memoize context value
const Provider = ({ children }) => {
  const value = useMemo(() => ({ user: currentUser }), [currentUser]);
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

typescript

// 错误写法 - Context对象在每次渲染时都会变更
const Provider = ({ children }) => {
  const value = { user: currentUser };  // 每次渲染都会创建新对象
  return (
    <MyContext.Provider value={value}>  // ❌ 导致无限循环
      {children}
    </MyContext.Provider>
  );
};

// 正确写法 - 对Context值进行记忆化处理
const Provider = ({ children }) => {
  const value = useMemo(() => ({ user: currentUser }), [currentUser]);
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

Debugging Workflow

调试工作流

Identify the error: Check browser console for hook violations.
Find the violation: search for early returns or dependency issues.
Locate the component: Grep for hook name or variable.
Apply fix: Use the patterns above as templates.
Test: Re-render and check console.

定位错误：查看浏览器控制台中的Hook违规提示。
查找违规点：搜索提前返回或依赖项相关问题。
定位组件：通过Grep查找Hook名称或相关变量。
应用修复：以上述模式为模板进行修复。
测试：重新渲染并检查控制台。

Instrumentation

日志工具调用

bash

./scripts/log-skill.sh react-hooks

bash

./scripts/log-skill.sh react-hooks