Zennに掲載されたuhyo氏の記事では、React 19.3で追加された「Fragment Refs」機能を使い、公式サポート外の方法でActivityコンポーネント（React 19.2で導入、内部要素にdisplay: noneを与えて非表示にする）に似た挙動を自作するテクニックが紹介されています。Fragment Refsにより、通常はrefに対応していないFragmentコンポーネントがrefをサポートするようになり、得られるFragmentInstanceオブジェクトは複数のメソッドを備えています。
記事ではHiddenという名前のコンポーネントを実装し、本来IntersectionObserverやResizeObserver向けに用意されたobserveUsingメソッドを、独自の疑似Observerオブジェクトを渡すことでFragment内の子DOM要素全てへのアクセスに転用しています。取得した子DOM要素にhidden属性を付与することで非表示を実現するというアイデアです。
著者自身、この手法は公式にサポートされたものではなく、将来の動作が保証されないと述べています。
出典が伝えている要点
- 記事はuhyo氏によりZennに掲載され、公開日は2026年9月14日である
- Fragment RefsはReact 19.3で追加された機能である
- Fragment Refsにより、通常はrefに対応していないFragmentコンポーネントがrefをサポートするようになった
- Fragment refで得られるのはFragmentInstanceオブジェクトであり、複数のメソッドを備えている
- Activityコンポーネントは自分では何も描画せず内部の要素にdisplay: noneを与える挙動を持つ
- Activityコンポーネントはこの記事とは別に、React 19.2で導入された
- 記事ではHiddenという名前のコンポーネントを実装し、Activityに似た非表示挙動をユーザーランドで実現している
- Hiddenコンポーネントの実装はFragmentInstanceのobserveUsingメソッドを利用している
- observeUsingメソッドは本来IntersectionObserverまたはResizeObserverを想定した機能である
- 記事の実装では独自の疑似ObserverオブジェクトをobserveUsingに渡すことで、Fragment内の子のDOM要素全てにアクセスしている
- 取得した子DOM要素にhidden属性を付与することで非表示を実現している
- 著者はこの手法について、公式にサポートされたものではなく将来動作が保証されないと述べている