React の createPortal 機能を使ってみた

背景

ある実装で１画面で２箇所レンダリングを行っている箇所がありました。
（画面の一部のみ React で実装）
具体的に説明すると以下のようなイメージです。

• HTML
  • ヘッダー
  • ボディ
    • 要素１：レンダリング
    • 要素２
    • 要素３：レンダリング
  • フッター

ボディの中の要素1、３だけ別々でレンダリングされている状態です。

これ２箇所でレンダリングしてるけど１回にした方がいいんでない？と知人にアドバイスもらったので、そんな方法あるのか！と調べ対応しました。

どう対応したの？

React に「createPortal」という機能があるようでこれを使いました。

• 公式抜粋
  DOM 上の別の場所に子要素をレンダーすることができます
  
  

  createPortal – React

  The library for web and native user interfaces

  

  ja.react.dev

使い方

実際イメージのコードを載せます

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('app')
  const root = createRoot(container)

  root.render(<Portal />)
})

const Portal = () => {
  const 要素1Container = document.getElementById('要素1_ID')
  const 要素３Container = document.getElementById('要素3_ID')

  return (
    <StrictMode>
      {createPortal(<要素1 />,要素1Container)}
      {createPortal(<要素３ />, 要素3Container)}
    </StrictMode>
  )
}

ここでは id が app の 要素を取得し　createRoot でReactルートを作成、作成したルートに対して Portal コンポーネントをレンダリングしています。
※これは推測ですが、挙動を見る限り作成するルートの場所は同じ画面上であればどこでも問題かと思います。

Portal コンポーネントでは特定の場所に要素１、要素３のコンポーネントを表示するように記述しています。

こうすることで要素１、要素３（子要素）を１回のレンダリングで特定の場所に表示することができるようになりました。
（間に要素２があっても問題ありません）

まとめ

指摘されないとこういう機能がある、とかそもそもレンダリングを１回にまとめよう、という発想が出てこなかったりするのでありがたいですね。

今後も知識を身につけつつ、自分自身もこうしたら良いよ、とアドバイスできるように成長してきたいです。