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

Question

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

我的组件.jsx

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

我的子组件通过 memoization 导出：

MySubComponent.jsx

export default React.memo(MySubComponent)

然而，这会破坏记忆，因为格式为{{...}}或{[...]}的道具每次都会实例化一个新的对象/数组（相同的值，但不同的 memory 地址），因此道具浅比较React.memo 有不同的看法。

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

Answer 1

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

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

<MySubComponent props1={obj}/>

在 SubComponent.jsx

export default React.memo(MySubComponent);

这仅适用于简单对象。