useCallback与useMemo依赖不变时能否保证返回值一致？及实践困惑

核心结论 #

依赖不变时，React不会随便让useCallback/useMemo返回新值，但存在特定场景会清除缓存——不能把这种稳定性当作语义上的绝对保证，它们本质还是性能优化工具。

新旧文档的差异梳理 #

• 旧文档：明确说useMemo是性能优化手段，不是语义保证，未来可能为了释放内存（比如处理离屏组件）清除缓存，要求代码在不用它的情况下也能正常运行。
• 新文档：细化了缓存清除的场景，说明React不会随意丢弃缓存，只有特定情况才会触发：
  • 开发环境下编辑组件文件时
  • 组件初始挂载时发生挂起（不管是开发还是生产环境）
  • 未来可能新增的场景（比如虚拟列表的内存优化）

关于你依赖useCallback稳定性的困惑解答 #

你想用useCallback的稳定性来处理useEffect依赖的思路没问题，但得清楚几个关键点：

1. 缓存稳定性不是绝对的：哪怕依赖没变化，React在上述特定场景下还是会让useCallback返回新函数，这时候如果你的useEffect依赖了它，就会意外触发执行。比如你示例里的Table组件，要是message函数因为缓存清除而变化，就会无缘无故触发分页1的请求。
2. 第三方hook的函数稳定性：如果第三方hook返回的函数用了useCallback，你可以默认它在依赖不变时保持稳定，但也要接受极端情况（比如React清缓存）下的变化。要是不想因为这种情况触发useEffect，可以这么优化：
   • 用useRef保存函数，避免把它加入useEffect的依赖数组：

     const Table = memo(() => {
       const [value, setValue] = useState({});
       const { message } = useMessage();
       const messageRef = useRef(message);
       
       // 实时更新ref里的函数引用
       useEffect(() => {
         messageRef.current = message;
       }, [message]);
       
       useEffect(() => {
         request({ page: 1, id }).then((res) => {
           setValue(res.data);
           // 调用ref里的最新函数
           messageRef.current("success");
         });
       }, [id]); // 这里只依赖id，避免message变化触发
     });
     

   • 如果函数不需要访问组件最新的状态或props，也可以把它定义在组件外部，或者用useCallback包裹并确保依赖正确。
3. ESLint依赖提示的处理：ESLint的依赖提示是为了避免闭包过期问题，但如果确定函数的变化不会影响useEffect的逻辑（只是缓存清除导致的变化），可以用上面的ref方法绕开，别直接忽略提示——直接忽略容易埋下闭包bug。

关键原则要记牢 #

useCallback和useMemo的核心是优化性能，不是用来保证值的语义稳定性。如果需要绝对稳定的引用，直接用useRef或者状态变量才是正确选择。

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