在React的useMemo/useEffect依赖中使用可选链是否安全规范？

问题背景 #

我正在开发一个注重性能的大型React应用。起初我避免在useMemo的依赖中使用对象属性（即避免在依赖中使用点语法），但后来在React文档中看到相关用法，便认为这是安全的。现在我的代码检查工具（linter）有时会提示我必须将可选链加入依赖，于是我写出了如下代码：

const artworks = useMemo(() => {
  let list = availableArtworks.artworks;
  if (route.params?.artworkId) {
    // Some Stuff here
  }
  return list;
}, [availableArtworks, route.params?.artworkId]);

起初我觉得这种写法不够规范，但现在正考虑常态化使用。我想确认：

1. 当route没有params属性时，route.params?.artworkId表达式是否为假值？
2. 当对象发生变化，突然出现params和artworkId时，useMemo是否会重新执行并处理该值？
3. 这种使用方式是否安全，或是存在不规范之处？

解答 #

1. route.params?.artworkId的取值情况 #

当route没有params属性时，route.params会返回undefined，通过可选链?.访问artworkId后，整个表达式的结果还是undefined——而undefined属于JavaScript的假值范畴（假值包含undefined、null、false、0、NaN、空字符串""）。

2. useMemo的重执行逻辑 #

会重新执行。React的useMemo依赖数组是通过浅比较判断是否触发重计算的：

• 初始状态下route.params?.artworkId是undefined，当后续route新增params属性且params包含artworkId时，表达式结果会变成artworkId的具体值（比如字符串、数字）。
• 前后两次依赖值（undefined vs 具体值）浅比较结果不相等，useMemo就会重新执行回调函数，处理新的artworkId值。

3. 写法的安全性与规范性 #

这种写法是安全且符合规范的，原因如下：

• 符合React官方规则：useMemo的依赖必须包含回调中用到的所有外部变量/属性，这里把route.params?.artworkId加入依赖，正好对应回调里的判断逻辑，既满足linter提示，也避免了闭包过时的问题。
• 语法合法：现代React和ESLint的React Hooks插件（如eslint-plugin-react-hooks）都支持在依赖数组中使用可选链，不会触发语法错误。
• 性能更精准：如果route.params是频繁变化的对象，但你只关心artworkId，这种写法只会在artworkId实际变化时触发重计算，比直接把route或route.params加入依赖更高效——毕竟如果依赖整个route.params，只要里面其他属性变化，useMemo就会重跑，而你只需要关注artworkId的变动。

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