[Discussion] 组件开发，是否需要每个函数都写上 useCallback ？

[chaishi]

这个功能解决了什么问题

讨论

你建议的方案是什么

讨论

[github-actions]

👋 @chaishi，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[richerfu]

非必须...部分函数强依赖多个state。如果用useCallback包裹 就必须把这些依赖加上，或者作为参数传入。再往后的迭代维护中会日益庞杂。不利于长期维护

[uyarn]

目前为止我认为三种情况需要加useCallback
1.当这个函数是其他hook的依赖 它的变动会触发其他hook的变化
2.创建这个函数有很高的成本
3. 需要配合memo减少往子组件透传的造成子组件的渲染

[honkinglin]

一般 useCallback 都是和 memo 配合使用的，举个简单的例子：
https://stackblitz.com/edit/react-iaiesr?file=src%2Fdemo.jsx

import React, { useCallback, memo, useEffect, useState } from 'react';

const Child = memo((props) => {
  console.log('child render', props);
  return <div></div>;
});

function Memo(props) {
  console.log('parent render', props);
  const test = () => {};
  const test2 = useCallback(() => {}, []);

  // 由于每次触发render都会生成新的 test ，导致了 Child 组件 props 一直变更
  return <Child test={test} />;

  // 由于 test2 被useCallback 缓存起来了，所以 Memo 触发render 也不会更新 test2 函数，避免了 Child 组件重渲染
  // return <Child test2={test2} />
}

export default function Demo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, []);

  return <Memo count={count} />;
}

由于 props 变动后会重新触发 render 流程，当你在组件内部定义了一个函数，重新 render 的时候又会重新定义这个函数，那么他的引用地址就发生了变化，当这个函数作为子组件的 props 传递时候，子组件由于 props 发生了变化会导致重新渲染。
但如果使用了 useCallback 包裹起来的函数就会被缓存起来，由于引用地址没有发生变化，就可以避免子组件非必要的重渲染。

但是这上面都需要有一个前提就是子组件要去做 props 的比较来避免更新，这也就是 memo 这个函数做的事。
如果 Child 不包裹 memo，那么无论你写不写 useCallback 都会重渲染，因为 Child 完全跟随父组件的 render 流程一起更新。简单地理解就是 Child 组件在 shouldUpdate 的生命周期里比较了一下 props 发现没有变化阻止了自我更新。

所以总结起来就是，当你发现性能问题时候需要做优化的时候可以利用子组件摆脱被动更新的这个机制来优化，否则的话不需要写 useCallback，因为缓存本身也有一定的性能消耗，而且如果没有配合 memo 函数的话，你写了 useCallback 也是白写。