React中对象字段作为useMemo依赖触发exhaustive-deps报错是否合法

问题解答 #

将对象的单个字段作为useMemo的依赖本身逻辑是合法的，ESLint 抛出错误并不是这个用法本身有问题，而是react-hooks/exhaustive-deps属于静态代码检查规则，它没办法动态判断你在依赖里写的badges["activity"]和回调中用到的属性是对应关系，只会识别到回调内部引用了badges这个顶层变量，因此会要求你把整个badges加入依赖数组。

你可以用以下方案解决报错，同时保证只在badges.activity变化时才重新计算iconMap：

• 提前把需要用到的属性提取为单独的顶层变量，再把这个变量加入依赖数组：

const activityBadge = badges["activity"];
const iconMap = useMemo(() => ({
  HomeStacks: {
    iconName: "home",
    iconType: "material-community",
  },
  ActivityStacks: {
    iconName: "bell",
    iconType: "material-community",
    badgeCount: activityBadge,
  },
}), [activityBadge]);

调整后ESLint就能正确识别依赖匹配，不会再抛出错误。

• 如果确认当前逻辑没有遗漏依赖，也可以临时禁用该行的规则检查，只需要在依赖数组行上方加注释// eslint-disable-next-line react-hooks/exhaustive-deps即可，不过该方案容易漏掉真正需要的依赖，非特殊情况不推荐使用。
• 不推荐直接把整个badges加入依赖数组：如果badges是每次渲染都会生成的新对象，就算activity字段的值没有变化，也会触发useMemo不必要的重新计算，反而带来额外的性能开销。

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