recoilで非同期処理の完了を待ちたい

Question

実現したいこと

recoilでdefultのhelloではなくgood morningをログに出力したい

前提

next.jsでrecoilを使用してステートの管理を行っています。
setTestで値を書き換えた直後にconsole.log(test)としても書き換える以前の値が出力されます。
これはsetTestが非同期処理の為だと思いますが、setTestが実行されたことを確認してからconsole.log(test)を実行する方法をご存じの方は教えていただけませんでしょうか。

該当のソースコード

import { useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { atom } from 'recoil';

const testState = atom<string>({
    key: 'testState',
    default: "hello",
  });

export default function Home() {
  const [test , setTest ] = useRecoilState(testState)
  useEffect(()=>{
      setTest("Good morning")
      console.log(test)
  },[])
  return (
    <>
    <h1>Hello World!</h1>
    </>
  )
}

Comments

[hoshi-takanori]

何がしたいかよく分かりませんが、"Good morning" を直接 (または一旦変数に入れて) 出力すれば良いのでは。または、useEffect の外で出力するとか。

[taka]

Good morningを出力するプログラムを作ることが目的ではありません。
あくまでこれは例で、実現したいことの本質はrecoilにセットした値を使用するプログラムを作りたい、です。

Answer 1

タイトルにあるように処理を待つことはできないような気がします。
（私も勉強不足で知らないだけな可能性があるので、ご存じの方がいらっしゃればコメントでご指摘いただきたいです

setTestで値を書き換えた直後にconsole.log(test)としても書き換える以前の値が出力されます。
これはsetTestが非同期処理の為だと思いますが、setTestが実行されたことを確認してからconsole.log(test)を実行する方法をご存じの方は教えていただけませんでしょうか。

どちらかというと、Reactのstate周りの仕様で、
stateが更新されてから（setTestが呼ばれてから）次にtestがレンダリングされるタイミングまでは元々の値を返すような仕様となっているためです。ドキュメント中ではsnapshot的な振る舞いをすると書かれています。

そのため、setした直後にconsole.logをしたとしても、値が反映されていないような値が返ってきます。

recoilもこれに倣っているため、useSetRecoilStateの実行直後にconsoleで値を確認しても値が反映されていないような挙動となってしまっています。

React docs

解決策とするならば、
実際に値をブラウザに表示することでデバッグは可能となると思います。

const testState = atom<string>({
    key: 'testState',
    default: "hello",
  });

export default function Home() {
  const [test , setTest ] = useRecoilState(testState)
  useEffect(()=>{
      setTest("Good morning")
  },[]) // 初回レンダリング時にsetするように書かれているので、
  return (
    <>
      <h1>Hello World!</h1>
      <p>{test}</p> {/** ここでtestを表示してあげる */}
    </>
  )
}