【React】入れ子コンポーネントのuseEffect実行順序を調べた

経緯

ある日、最上位付近のコンポーネントで横断的なデータを設定するためにuseEffectを使用していました。
そんな折、末端付近のコンポーネントのuseEffectで設定したデータを参照したところ、データが設定されていないと怒られましたとさ。

useEffectの実行順序（Renderもおまけで）

赤●スタート

Order Render/Mount-useEffect/Unmount-useEffect

コードで確認

おわりに

マウント時のuseEffectの実行順序はRenderの順序と異なり、クセがあるので気を付けないとですね。