React中useMemo绑定onClick函数出现依赖警告及频繁重渲染如何解决

问题根因 #

两个警告的连锁原因很明确：

• 你的useMemo回调里用到了外部函数myFunc，React Hook依赖检查规则要求你把它加入依赖数组，否则就会报缺失依赖的警告
• 如果你是直接在组件内部声明的myFunc，没有做任何缓存处理，组件每次重新渲染都会生成一个全新的myFunc函数引用，放到useMemo的依赖里就会导致useMemo每次渲染都重新执行，缓存完全失效，所以会触发第二个警告
• 直接忽略依赖警告会存在闭包陷阱，可能导致myFunc调用时读取到过时的状态变量，不建议这么做

修复方案 #

方案1：使用useCallback稳定myFunc引用（最通用） #

适合myFunc需要在组件多个地方调用的场景，用useCallback包裹myFunc的定义，只有myFunc自身的依赖变化时才会更新引用：

// 修改myFunc的定义，用useCallback包裹
const myFunc = useCallback((index) => {
  // 原有myFunc的业务逻辑
  // 这里用到的所有外部状态、props都要放到useCallback的依赖数组里
}, [/* 填入myFunc用到的所有外部依赖 */])

// useMemo的依赖数组加myFunc即可，不会频繁触发重计算
const test = useMemo(() => {
   return myData.map((obj, index) => {
      return (
        <div key={index}>
           <button type="button" onClick={() => myFunc(index)}>Test</button>
        </div>
      )
   });
}, [myData, myFunc]);

方案2：将无依赖的myFunc移到组件外部 #

如果myFunc完全没有用到组件内部的状态、props等变量，可以直接把它定义到组件函数外面，它的引用会永远稳定，不需要加任何Hook：

// 组件外层定义myFunc
const myFunc = (index) => {
  // 原有myFunc的业务逻辑
}

const MyComponent = () => {
  // 组件内部useMemo直接使用即可
  const test = useMemo(() => {
     return myData.map((obj, index) => {
        return (
          <div key={index}>
             <button type="button" onClick={() => myFunc(index)}>Test</button>
          </div>
        )
     });
  }, [myData, myFunc]);

  // 其他组件逻辑
}

方案3：使用React 18+的useEvent #

如果使用React 18.2及以上版本，可以用useEvent包裹myFunc，它会返回一个引用永远稳定的函数，同时始终能拿到最新的状态和props，不需要处理依赖：

const myFunc = useEvent((index) => {
  // 原有myFunc的业务逻辑，无需填写依赖数组
})

const test = useMemo(() => {
   return myData.map((obj, index) => {
      return (
        <div key={index}>
           <button type="button" onClick={() => myFunc(index)}>Test</button>
        </div>
      )
   });
}, [myData]);

额外提示 #

如果myData的数据量很小，useMemo的优化收益很低，也可以考虑去掉useMemo，直接在渲染时map生成节点，减少不必要的依赖维护成本。

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