React自定义Hook中状态值异常、读取及useCallback使用疑问

问题描述 #

调用自定义Hook useCatImages 的组件中执行 incrementPage() 时，console.log('pageNum: ', pageNum) 始终输出0。虽然使用 setPageNum(prevPage => ...) 的写法能正常更新状态，但想明确三个问题：

1. 为什么pageNum始终显示0？
2. 如果想访问pageNum的当前值，正确操作方式是什么？用ref是否合适？
3. 在这类Hook中应该何时使用useCallback？

相关代码：

export function useCatImages() {
  const [images, setImages] = useState([]);
  const [pageNum, setPageNum] = useState(0);
  const MAX_PAGE = 3;

  const fetchImages = useCallback(async (page) => {
    ...
  }, []);
  
  const incrementPage = useCallback(() => {
    console.log('pageNum: ', pageNum);  // 始终输出0
    setPageNum((prevPage) => {
      return (prevPage < MAX_PAGE)
        ? prevPage + 1
        : prevPage;
    });
  }, [pageNum]);

  return {
    images,
    incrementPage,
  };
}

问题解析与解决方案 #

1. 为什么pageNum始终显示0？

这是闭包捕获旧状态值导致的：

• useCallback 会捕获当前渲染周期的 pageNum 值，并将函数与依赖数组绑定。如果你的 incrementPage 被父组件缓存（比如传递给了用 React.memo 优化的子组件但依赖未更新），或者你保存了初始的函数引用，后续调用的始终是第一次渲染时创建的函数，它捕获的 pageNum 就是初始值0。
• 即使依赖数组正确，当前函数作用域内的 pageNum 也不会因异步状态更新立即改变——状态更新是批量处理的，当前渲染周期的变量值不会同步更新。

2. 如何正确访问pageNum的当前值？

有两种可靠方案：

• 方案一：用状态更新函数的prev参数
  如果你只是在更新状态时需要当前值，直接使用 setPageNum(prevPage => ...) 即可，这是React官方推荐的方式，能确保拿到最新状态值，不受闭包影响。
• 方案二：用useRef同步状态值
  如果需要在状态更新之外的场景（比如你的console.log）访问当前值，用useRef同步状态是合理的，这也是React官方认可的解决方案：

  export function useCatImages() {
    const [images, setImages] = useState([]);
    const [pageNum, setPageNum] = useState(0);
    const pageNumRef = useRef(pageNum);
    const MAX_PAGE = 3;
  
    // 同步状态到ref
    useEffect(() => {
      pageNumRef.current = pageNum;
    }, [pageNum]);
  
    const incrementPage = useCallback(() => {
      console.log('pageNum: ', pageNumRef.current); // 能拿到最新值
      setPageNum((prevPage) => {
        return (prevPage < MAX_PAGE)
          ? prevPage + 1
          : prevPage;
      });
    }, []); // 无需依赖pageNum，通过ref访问最新值
  
    return {
      images,
      incrementPage,
    };
  }
  

3. 这类Hook中何时使用useCallback？

useCallback 的核心作用是缓存函数引用，避免因函数引用变化导致不必要的重渲染或Hook触发：

• 当函数需要作为props传递给用React.memo优化的子组件时，用useCallback包裹可以避免子组件不必要重渲染。
• 当函数作为其他依赖函数的Hook（比如useEffect、useMemo）的依赖项时，用useCallback能确保依赖稳定，避免Hook频繁触发。
• 如果函数仅在当前Hook内部使用，未传递给外部组件或作为其他Hook的依赖，完全不需要用useCallback——每次渲染创建新函数的性能开销可忽略，反而会增加代码复杂度。
• 注意：使用useCallback时必须正确填写依赖数组，否则会出现闭包捕获旧值的问题。

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