[React]バブリングについて

世の中の全エンジニアの方々、お疲れ様です。
Reactを勉強しており、勉強の中で学んだことをアウトプットしていきます。
今回はReactのバブリングと呼ばれる挙動についてです。

バブリング

いきなりですが、以下のようなコンポーネントを作成したとします。
divタグにbuttonタグが2つネストしている状況です。

export const Toolbar = () => {
  return (
    <div className="Toolbar" onClick={() => {
      alert('ツールバー！');
    }}>
      <button onClick={() => alert('再生！')}>
        動画を再生
      </button>
      <button onClick={() => alert('アップロード！')}>
        アップロード
      </button>
    </div>
  );
}

画面上ではこのようになります。

では、「動画を再生」ボタンを押してみます。

すると、このように「再生！」のアラートの後に「ツールバー！」のアラートまで出現しました。

さらに、「アップロード」ボタンでも同じ挙動が確認できます。

この現象はReactのバブリングと呼ばれる仕組みに起因するもので、公式ドキュメントでは以下のように説明されています。

イベントハンドラは、コンポーネントが持っている可能性のあるどの子が由来であってもイベントをキャッチします。このことをイベントがツリーを “バブリング (bubble)” または “伝播 (propagate)” する、と表現します。イベントは発生した場所から始まり、ツリーを上に向かって進んでいきます。

なるほど。
子のイベントハンドラ（今回はonClickイベント）が発火すると親のイベントハンドラも発火。それが順々に上の階層につながっていくのですね。

イメージ↓

以上、バブリングについて軽くまとめてみました。この仕様を理解していないと予期せぬ挙動の処理に追われることになってしまいますので、これからも理解を深めていきたいと思います！
ここまで読んでいただきありがとうございました！