React的ESLint是否存在可检测需useMemo处理的props的规则？

你提到的这类给memo化组件传递内联对象/数组导致缓存失效的场景，有现成的ESLint规则可以检测。

主流的eslint-plugin-react插件提供了三个专门的校验规则，分别对应内联对象、内联数组、内联函数作为prop的场景：

• react/jsx-no-new-object-as-prop：禁止将内联新建的对象作为prop传递
• react/jsx-no-new-array-as-prop：禁止将内联新建的数组作为prop传递
• react/jsx-no-new-function-as-prop：禁止将内联新建的函数作为prop传递

开启规则的配置方式非常简单，在你的ESLint配置文件的rules字段中添加如下配置即可：

{
  "rules": {
    "react/jsx-no-new-object-as-prop": "error",
    "react/jsx-no-new-array-as-prop": "error",
    "react/jsx-no-new-function-as-prop": "error"
  }
}

开启后，你问题示例中写的如下代码都会触发ESLint报错：

<MySubComponent props1={{a: 0, b:1}}/>
<MySubComponent props2={["toto", "tata"]}/>

如果确实需要传递对象、数组类型的prop，可以通过两种方式保证引用稳定，避免破坏memo缓存：

• 若prop的值是静态不变的，直接把值定义在组件函数外部即可
• 若prop的值是动态生成的，使用useMemo钩子包裹生成逻辑，保证依赖不变时返回的引用不变

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