React中依赖自定义hook返回函数时，是否需先做memoize处理？

场景核心矛盾 #

你写的这段代码里，useMyHooks返回的functionA和functionB可能在组件每次渲染时重新创建，而你需要shouldOnlyCallOnce关联的逻辑只执行一次，但ESLint给出的两个自动修复建议都没解决根本问题——要么打破“仅执行一次”的需求，要么留下闭包过时的隐患。

ESLint建议的问题拆解 #

• 方案(a)：直接添加依赖
  如果直接把functionA、functionB塞进useCallback和useEffect的依赖数组，只要这两个函数一重建，shouldOnlyCallOnce就会更新，进而触发useEffect重复执行，直接违背你“仅执行一次”的初衷。要让这个方案可行，前提是useMyHooks内部已经用useCallback对返回的函数做了memoization，确保它们不会随意重建。

• 方案(b)：移除依赖数组
  删掉useEffect的依赖数组确实能让回调只跑一次，但会引发闭包过时问题：如果后续functionA或functionB的逻辑更新了，shouldOnlyCallOnce里引用的还是组件初始渲染时的旧版本，很容易出现逻辑错误，而且这也不符合React Hooks的依赖规范，长期维护容易踩坑。

正确处理模式 #

1. 先检查自定义Hook的实现 #

优先看useMyHooks内部有没有对返回的函数做memoization。如果自定义Hook本身就用useCallback缓存了functionA和functionB，那直接加依赖是最安全的做法：

// 假设useMyHooks内部实现
function useMyHooks() {
  const functionA = useCallback(() => {
    // 业务逻辑
  }, []); // 依赖正确的话，functionA只会创建一次

  const functionB = useCallback(() => {
    // 业务逻辑
  }, []);

  return [functionA, functionB];
}

// 组件内代码调整
const shouldOnlyCallOnce = useCallback(() => {
  functionA();
  functionB();
}, [functionA, functionB]);

useEffect(() => {
  shouldOnlyCallOnce();
}, [shouldOnlyCallOnce]);

这种情况下，functionA和functionB不会无故更新，shouldOnlyCallOnce也只会创建一次，useEffect自然只执行一次，完全符合你的需求。

2. 无法修改自定义Hook时的替代方案 #

如果useMyHooks是第三方库或者你没法修改它的实现，用useRef保存函数的最新引用是最优解——既保证useEffect只执行一次，又能避免闭包过时问题：

function MyComponent() {
  const [functionA, functionB] = useMyHooks();

  // 用ref跟踪最新的函数引用
  const functionARef = useRef(functionA);
  const functionBRef = useRef(functionB);

  // 每次渲染都更新ref，确保拿到最新的函数
  useEffect(() => {
    functionARef.current = functionA;
    functionBRef.current = functionB;
  });

  const shouldOnlyCallOnce = useCallback(() => {
    // 调用ref里的最新函数
    functionARef.current();
    functionBRef.current();
  }, []); // 依赖为空，确保回调不会被重建

  useEffect(() => {
    shouldOnlyCallOnce();
  }, []); // 只执行一次
  ...
}

这个模式的关键是用useRef“兜底”函数的最新版本，而useCallback和useEffect的依赖数组保持为空，完美兼顾“仅执行一次”和“调用最新函数”两个需求。

3. 关于memoization的性能权衡 #

你担心的“过度memoize降低性能”确实存在，但要分场景看待：

• 对于普通组件，useCallback的性能开销微乎其微，完全可以忽略。
• 只有当组件超级频繁渲染，且memoized的函数内部有极高成本的计算时，才需要权衡是否要避免memoization。
• 多数情况下，用useCallback缓存函数是利大于弊的，尤其是当函数作为props传给子组件时，能避免子组件不必要的重渲染。

内容的提问来源于stack exchange，提问作者Joseph