设计 Recoil.js 原子以将对象数组显示到表格中

如何解决设计 Recoil.js 原子以将对象数组显示到表格中

我有一组对象 [{id: 1,data:{}},{id: 2,data: {}}]。 我想渲染到一个表，以便只有更改的行重新渲染，

一个问题是这个数组每 500 毫秒更新一次（仅参考更新数据可能/可能不会改变），我终于可以解决问题，但代码看起来很丑！

示例：

const App = () => {
  const [data,setData] = useState([ {id: 1,data: {}} ]);
  setInterval( () => setData([...data]),500);
  // real app does changes to some rows.
  return <table>
    {data.map(row => (
      <tr key={row.id}>
       <th>{row.id}</th>
       <td>{`${row.data}`}</td> 
      </tr>
    ))}
  </table>
}

在上面的示例中，组件将每 500 毫秒重新渲染一次。现在的目标是将其转换为 recoiljs，以便：

• 只有在数组中有新 ID 时，主组件（一个有间隔的组件）才会重新渲染
• Row 组件仅在其对象发生更改时重新渲染

我尝试了什么： Playground example of my current solution。 我尝试了很多 atomFamily/中间选择器试验。但最终有将近 4-5 个选择器，所以我可以在更改时将数组转换为对象，另一个用于提取键，另一个用于通过键选择对象。但它看起来非常冗长/复杂。

我做错了吗？