Yasin

Yasin

React useCallback的依赖数组为什么可以放函数

useCallback 的依赖数组为什么可以放函数?

const verifyEmail = useCallback(
  async (token: string) => { ... },
  [setStatus, setUser],  // ← 这里放的是函数
);

useCallback 的第二个参数是依赖数组(dependency array),不限于基础类型,任何值都可以放,包括函数、对象等。React 的规则是:

当依赖数组中任何一个值的引用发生变化时,重新创建回调函数。

setStatussetUser 来自 Zustand store(useAuthStore())。Zustand 的 setter 函数引用是稳定的(不会每次渲染都变),所以实际效果是这个 useCallback 几乎永远不会重建——等价于只创建一次。

放在依赖数组里是因为 ESLint 的 react-hooks/exhaustive-deps 规则要求:回调内部用到的外部变量都必须列在依赖数组中。setStatussetUser 在回调内部被调用了,所以必须列出来,否则 lint 会报警告。

简单理解:依赖数组 = "这个回调用到了哪些外部变量",跟变量类型无关。