这种返回方法对象的React函数结构是否会拖慢应用性能？

这种写法本质就是 没有遵守命名规范的自定义Hook，绝大多数场景下根本不会拖慢应用速度，你担心的“每次渲染重新创建所有内容”的实际开销，远没有想象中大。

• 先厘清两个容易混淆的概念：函数对象的创建成本，和函数体的执行成本
  哪怕Payment函数写满1000行业务逻辑，每次组件渲染调用它的时候，JS引擎不会把1000行代码重新编译、逐行跑一遍。创建一个新函数对象的开销是微秒级的——只是生成一个指向已有编译代码的引用指针、绑定对应的闭包作用域而已，和函数体本身的长度没有线性关系。哪怕你在里面定义10个、20个异步方法，渲染时的这点开销用户根本感知不到。
• 真正会引发卡顿的场景，和“重新创建函数”本身无关
  只有当你在Payment函数的顶层——也就是每次调用都会立刻执行的位置——放了重量级同步逻辑，才会拖慢速度：比如遍历十万条数据生成大列表、重复初始化上百兆的类实例、跑复杂的同步计算，这些操作哪怕换正经写法，每次组件渲染跑一遍一样会卡。反过来如果只是定义几个异步方法再返回，哪怕文件长达1000行，只要没有同步重逻辑，性能影响可以忽略。
• 这种写法真正的性能坑，是引用不稳定带来的连锁反应
  因为每次组件渲染调用payment()时，返回的对象、两个支付方法都是全新的引用。如果你把这两个方法传给被React.memo包裹的子组件，或者把返回值放进useEffect/useMemo的依赖数组里，这个全新的引用会直接触发不必要的重渲染、重复执行副作用。这才是这种写法最容易出性能问题的地方，和创建函数本身的CPU消耗没有关系。

如果要消除引用不稳定的问题，只需要在函数内部按React Hook规范做一层包裹，和正经的自定义Hook没有任何区别：

export default function usePayment() {
  const doPayment = useCallback(async () => {
    // 原有支付逻辑
  }, []);

  const doPayment2 = useCallback(async () => {
    // 原有支付逻辑
  }, []);

  return useMemo(() => ({
    doPayment,
    doPayment2
  }), [doPayment, doPayment2]);
}

修改后只要没有依赖变化，每次渲染返回的函数和对象引用都是稳定的，不会因为引用变化触发不必要的下游重渲染。

补充：很多人会把“每次重新创建函数”当成必须优化的性能问题，实际上React组件本身的函数体里，每次渲染定义的事件处理函数都是全新创建的，React官方也从来没把这个作为需要刻意优化的点——只有当这个函数的引用会影响到下游组件渲染、副作用执行的时候，才需要用useCallback做引用稳定处理。

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