Fragment Refsのずるい使い方
DRANK

Fragment Refsは、React 19.3で追加された新機能のひとつで、Fragmentコンポーネントがrefをサポートするようになるというものです。ここで得られるrefはReactが用意したFragmentInstanceオブジェクトで、addEventListenerやfocusといったいくつかのメソッドを持っています。Fragmentは何もDOM要素を描画しない、実態のないラッパーですが、FragmentInstanceを通じてそのラッパーに対して疑似的に操作を行っているかのように振る舞います。基本的な使い方は公式ドキュメントや他の記事に譲るとして、この記事ではちょっとずるい使い方を紹介します。背景: ActivityコンポーネントActivityコンポーネントはReact 19.2で導入されたもので、<Activity mode="hidden">で囲まれた部分は非表示になります。<Activity mode="hidden"> <h2>非表示セクション</h2> <p>この部分は非表示になります。</p> </Activity> Activityコンポーネントの利点はいくつかあります。例えば、画面には見えないけど裏でレンダリングしておくことで、表示/非表示を素早く切り替えることができます。裏でレンダリングされる場合はレンダリングの優先度が下げられるため、パフォーマンスへの悪影響を…

zenn.dev
Related Topics: