这个场景非常简单，up可以直接进入代码，而无需阅读下面的描述。

我正在创建一个非常简单的react应用程序，它呈现一个包含单个h3元素的列表（每个列表都有一个唯一的id）。单击h3元素时，其文本将从“未单击”更改为“已单击”。这是通过根组件（即App）中的useState实现的。状态跟踪正在单击的组件的id。单击h3元素时，它将触发回调，将单击的id设置为其自己的id。问题是，当触发单击时，所有自定义列表组件都将重新呈现。我试图在上使用React的UseMoom来防止重新渲染，但出现以下错误：

无效的挂接调用。钩子只能在函数组件的主体内部调用。这可能是以下原因之一： 1.React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了钩子3的规则。在同一个应用程序中可能有多个React副本

// App.js
import React from 'react';
import ListElement from './ListElement'
const listOfID = [1,2,3,4,5,6]

function App() {

  const [clicked, updateClicked] = React.useState(null)
  return (
    <ul>
      {listOfID.map((id, index )=> < ListElement key={index} id={id} clicked={id == clicked} updateClicked={updateClicked}/>)}
    </ul>
  )
}

// ListElement.js
import React from 'react';

export default React.useMemo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);