背景

パフォーマンス上げるためにcomponentをuseMemoを使ってメモ化したのですが、なぜか再描画されている。
原因はmemo化したcomponentの表示を条件付きレンダーで切り替えていたこと。
簡潔に書くとこんな感じでした。。。

親

const Parent = () => {
  const child = useMemo(() => <Children />)
  return (
    ...
    {isOpen && (
      <Modal>
        {child}
      </Modal>
    )}
  )
}

解決

js側でレンダリングさせると重くなってしまうのでcssで切り替える。

親

return (
  ...
  <Modal style={{ display: isOpen ? '' : 'none' }}>
    {child}
  </Modal>
)

ちなみに{visibility: hidden}だとcomponentの階層ごとに消えていくのでめっちゃちらついた