React Hook中返回的resetWidgetCount函数是否需用useCallback包裹？

核心结论 #

在你当前的代码场景下，不需要给resetWidgetCount包裹useCallback，也不需要把setWidgetCount作为依赖项。

具体分析 #

• setState的稳定性：React官方明确保证，useState返回的setState函数在组件整个生命周期内引用不会变化，不会随组件重渲染而更新。所以即便不把它放进依赖数组，也不会出现闭包失效的问题。
• 当前场景的性能影响可忽略：你的resetWidgetCount只是单纯调用setWidgetCount(0)，没有依赖任何动态变化的值。就算每次组件重渲染时重新创建这个函数，React处理这种轻量操作的成本极低，不会对性能造成可感知的影响。
• 需要用useCallback的场景：
  • 当这个函数作为props传递给使用了React.memo优化的子组件时，用useCallback可以避免子组件不必要的重渲染；
  • 当这个函数被用作useEffect、useMemo等其他Hook的依赖项时，需要用useCallback保证函数引用稳定，防止Hook意外触发。

简化后的代码示例 #

import { useState } from "react";
import "./styles.css";

const useWidget = () => {
  const [widgetCount, setWidgetCount] = useState<number>(0);

  // 无需useCallback包裹
  const resetWidgetCount = () => {
    setWidgetCount(0);
  };

  return {
    widgetCount,
    setWidgetCount,
    resetWidgetCount
  };
};

export default function App() {
  const { widgetCount, setWidgetCount, resetWidgetCount } = useWidget();

  const handleIncrement = () =>
    setWidgetCount((prevState: number) => prevState + 1);

  return (
    <div className="App">
      <div>Count: {widgetCount}</div>
      <div>
        <button onClick={handleIncrement}>Increment</button>{" "}
        <button onClick={resetWidgetCount}>Reset</button>
      </div>
    </div>
  );
}

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