hooks中是否需要对所有函数使用useCallback？

Question

RT
不少文章都是解释说useCallback本身就有性能消耗，所以不要对每一个函数都使用useCallback。
但是读了精读react hooks最佳实践后，又看到说要对每一个函数都使用useCallback

看的文章越多就越困惑到底哪种说法才是正确的呢

Answer 1

应该换个说法：只在有需要的时候使用useCallback
useCallback从来不是为了优化内联函数性能而存在的
官方文档的描述：

Returns a memoized callback.

使用它的目的是为了一些子组件不必要的重新渲染。

举个例子，我现在有一个自定义hook，功能是在组件mount时侦听页面click事件，unmount时取消事件

代码是这么设计的：

const useDocumentClick = (callback: () => void) => {
  useEffect(() => {
    console.log("effect");
    document.addEventListener("click", callback);
    return () => document.removeEventListener("click", callback);
  }, [callback]);
};

const App = () => {
  const [count, setCount] = useState(0);
  useDocumentClick(() => {
    console.log("document click");
  });
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>click me!</button>
    </div>
  );
};

这会存在一个问题就是App每次状态发生变化时,都会重复一遍addEventListener, removeEventListener的动作，这显然是不必要的。解决方案：

useDocumentClick(
    useCallback(() => {
      console.log("document click");
    }, [])
);