画面遷移後にuseEffectが実行されていないように見えた。

はじめに

Reactでデジタル名刺アプリを作成しているときに想定した動きをしてくれないことがありました。

問題

【期待している動き】

1. ユーザー登録後にホームに遷移
2. ホームでのuseEffectでユーザーを全取得
3. 全取得したユーザーデータに1で登録したユーザーが含まれている

しかし、実際はユーザーデータに1で登録したユーザーが含まれていませんでした。

解決策

以下はユーザー登録画面のonClick関数です。

+ const onSubmit: SubmitHandler<formType> = async (data) => {  
- const onSubmit: SubmitHandler<formType> = (data) => {  
/*～
省略
～*/
+    await createUser(user);
-    createUser(user);
    navigate("/");
  };

登録を待たずに遷移してuseEffectが実行されていたことが原因でした。

おわりに

Promiseを解決するときにawaitはもちろん使っていたが、それ以外のただ待ちたいっていう場合にawaitを使ったことがなかった。
動きを想像する。