reactjs - Reactでコンポーネントリストの一部をメモする方法

Question

React レンダリング/useMemo のガイダンスを探しています。

2,000 以上のアイテムのリストがあり、それぞれが React コンポーネントです。リストから独立してレンダリングされる「現在選択されている」アイテムのハイライトがあります。これにより、リストを一度だけレンダリングできます。

useMemo(_ => {
  <Item .../>
  <Item .../>
  ...
  <Item .../>
}, [contents])

現在、リスト項目を「展開」する機能を追加しています。これは、展開されていない状態のリスト項目を変更することなく、新しい DOM 要素を追加するだけです。

Itemそれぞれが 2 つの部分であると想像できます。

function Item(props) {
  return
    <div>
      <SubItem />
      {
        if (props.open) {
          <OtherItem />
        } else {
          null
        }
      }
    </div>
}

useMemo(_ => {
  <Item open={1 == current} .../>
  <Item open={2 == current} .../>
  ...
  <Item open={n == current} .../>
}, [contents, current])

質問: 新しい項目を展開/折りたたむたびにリスト全体を再レンダリングせずにこれをサポートする方法はありますか?

残念ながら、展開された DOM 要素は「フロー内」にあるため、展開によってリスト項目がその後にプッシュされます (ホバー/オーバーレイだけではありません)。