Intersection Observer API のパフォーマンス：複数インスタンス vs 共有インスタンス

はじめに きっかけは以下のかまぼこさんのツイートです。 僕からの回答は以下です。 この記事ではこちらについてもう少し詳しく解説いたします。なお、Intersection Observer API の解説は割愛しますので、詳しくはこちらをご確認ください。 検証 コンポーネントごとにオブザーバー スクロールに応じて要素をアニメーションさせる場合、React で素直に実装すると、おそらくコンポーネントごとに Intersection Observer のインスタンスを生成して、それぞれの要素を監視して状態を変化させることになるかと思います。具体的なコードを見たほうがわかりやすいと思いますのでサンプルコードを示します。