ESLint for React：是否有检测需要 useMemo 的道具的规则？答案

【问题标题】：ESLint for React: is there a rule to detect props that need a useMemo?ESLint for React：是否有检测需要 useMemo 的道具的规则？
【发布时间】：2022-01-07 02:51:56
【问题描述】：

使用 react，在一个功能组件返回的 JSX 代码中我可以拥有：

MyComponent.jsx

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

我的子组件是通过记忆导出的：

MySubComponent.jsx

export default React.memo(MySubComponent)

但是这会破坏记忆，因为格式为 {{...}} 或 {[...]} 的道具会每次实例化一个新的对象/数组（相同的值，但不同的内存地址），因此 React.memo 的 props shallow-compare 看到它不同。

是否有任何 ESLint/JSLint 规则来检测这些类型的道具？

【问题讨论】：

标签： node.js reactjs eslint react-props memoization

【解决方案1】：

您可以使用 useMemo 来记忆对象或数组，并将其作为道具传递给 MySubComponent，如下所示：

const obj = React.useMemo(() => ({a: 0, b:1}), []);

<MySubComponent props1={obj}/>

在 SubComponent.jsx 中

export default React.memo(MySubComponent);

这仅适用于简单对象。

【讨论】：

感谢您的快速回答。不幸的是，这不是我的情况：这是一个有许多开发人员的复杂项目。所以我希望 ESLint 在“useMemo”更好地避免无用渲染时警告所有开发人员。