当函数作为useMemo依赖数组的依赖项时，useMemo与useCallback该如何选择？附代码场景解析

嘿，咱们来掰扯清楚这个useMemo和useCallback的选择问题～

首先得明确这俩Hook的核心差异：

• useCallback：用来缓存函数本身的引用，避免每次组件渲染都重新创建这个函数。
• useMemo：用来缓存函数的计算结果（比如数组、对象、数值这类具体值），避免每次渲染都重复执行计算逻辑。

回到你的代码示例，咱们分情况看：

情况1：用useCallback定义getConfigs #

这种写法是把getConfigs变成一个被缓存的函数，只要它的依赖数组（这里是空数组）不变，这个函数的引用就不会变。然后在someMemoData里调用它来处理props.configs。

适合场景：如果这个getConfigs函数需要在多个地方复用（比如其他组件、其他useEffect/useMemo里），用useCallback缓存函数引用就很有意义——避免每次渲染都生成新的函数，导致依赖它的Hook不必要地重新执行。

代码示例（修正后）：

// 当getConfigs需要多处复用时，用useCallback缓存函数
const getConfigs = useCallback((configs) => {
  return configs.filter(/* 你的过滤逻辑 */);
}, []); // 注意：如果过滤逻辑依赖其他变量，一定要加到这个依赖数组里！

const someMemoData = useMemo(() => {
  return { 
    names: props.names, 
    configs: getConfigs(props.configs) 
  };
}, [props.names, getConfigs, props.configs]); 
// 依赖props.configs是因为每次调用函数都需要最新的原始配置数据

情况2：用useMemo定义getConfigs #

你这里的写法其实是直接用useMemo缓存了过滤后的configs数组，而不是函数。这时候getConfigs已经是最终需要的结果了，不需要再调用它。

这种写法更贴合你的最终需求——因为你要的是过滤后的数组，而不是函数本身。如果getConfigs只在someMemoData里使用，完全没必要把它做成函数，直接缓存计算结果更高效。

优化后的代码示例：

// 直接缓存过滤后的configs结果
const filteredConfigs = useMemo(() => {
  return props.configs.filter(/* 你的过滤逻辑 */);
}, [props.configs]);

const someMemoData = useMemo(() => {
  return { 
    names: props.names, 
    configs: filteredConfigs 
  };
}, [props.names, filteredConfigs]); 
// 依赖已经处理好的filteredConfigs，逻辑更清晰

甚至如果过滤逻辑不复杂，你可以直接把逻辑内联到someMemoData的useMemo里，代码更简洁：

const someMemoData = useMemo(() => {
  return { 
    names: props.names, 
    configs: props.configs.filter(/* 你的过滤逻辑 */) 
  };
}, [props.names, props.configs]);

总结建议 #

• 如果你需要复用函数本身，选useCallback；
• 如果你需要复用计算出来的值，选useMemo；
• 在你的场景里，最终目标是拿到包含过滤后configs的对象，所以优先考虑用useMemo直接缓存过滤结果，或者内联逻辑。只有当getConfigs函数需要在多个地方复用的时候，再考虑用useCallback。

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