React 自定义 Hook 的设计模式 — 依赖数组陷阱

代码背景

审查一段复用度很高的数据请求 Hook，发现存在典型的依赖数组问题。

问题代码

复制
[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], [data, setData] = ,[object Object],(,[object Object],);

  ,[object Object], ,[object Object], = ,[object Object], (,[object Object],) => {
    ,[object Object], res = ,[object Object], ,[object Object],(,[object Object],);
    ,[object Object],(,[object Object], res.,[object Object],());
  };

  ,[object Object],
  ,[object Object],(,[object Object], {
    ,[object Object],();
  }, [fetchUser]);
}

问题分析

1. fetchUser 在每次渲染时都会重新创建（函数引用变化）
2. useEffect 依赖 fetchUser，导致每次渲染都重新执行 effect
3. 形成无限循环：effect → setState → 渲染 → 新 fetchUser → effect...

修复建议

复制
[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], [data, setData] = ,[object Object],(,[object Object],);

  ,[object Object],(,[object Object], {
    ,[object Object],
    ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
      ,[object Object], res = ,[object Object], ,[object Object],(,[object Object],);
      ,[object Object],(,[object Object], res.,[object Object],());
    }
    ,[object Object],();
  }, [userId]); ,[object Object],

  ,[object Object], data;
}

Code Review 总结

• 避免将函数放在 useEffect 依赖数组中
• 如果函数必须复用，使用 useCallback + 稳定依赖
• 使用 ESLint react-hooks/exhaustive-deps 规则自动检测