5/5.log

useEffectの挙動について

useEffectの挙動について思ったような挙動と異なる動きをしていて調査していました。以下のコードを見てどのような結果が出力されると思いますか？

 const [test, setTest] = useState('');
 
 useEffect(() => {
   setTest('test');
   console.log('set test');
 }, []);
 
 useEffect(() => {
   console.log(test);
 }, [test]);

答えですが以下のようになります。

set test
''
test

個人的に期待している答えは以下なのですが。

set test
test

なぜなんでしょうか？並行処理しているのかと思って以下のコードも試してみたのですがそこでは期待した結果が出てきました。

 const [state, setState] = useState(true);
 
 useEffect(() => {
   for (let i = 0; i <= 10; i++) {
     console.log(i);
   }
 }, [state]);
 
 useEffect(() => {
   for (let i = 0; i <= 10; i++) {
     console.log(i);
   }
 }, [state]);

0
1
2
3
4
5
6
7
8
9
10
0
1
2
3
4
5
6
7
8
9
10

そもそもそんなコード書く必要ある?

いや最初だけならuseEffectやねくて普通にコード内に書けよ と言われそうですが実は自分のコードではlocalstorageを使っていて環境がnextjsだったのでssr時には実行させないためにuseeffectを使っていました。(useEffectはクライアントでしか実行されない)

他の方法も模索していたのですがdynamic importといっても該当コードはcontext api内に入っているものですしあまりパッとした解決策は見当たりませんでした。一応自力で解決することができていて二つ目のエフェクトに渡す値の初期値をunefinedにしその時はifで弾くようにして解決しています。

もう少し良さそうな方法を見つけることができたら記事にして共有しますね！