[React/Next.js] ContextAPIの値の更新を待ってデータを取得する

このやり方でいいのか分からないが、他のコンポーネントでcontextの読み込みをした値を使ってサーバーからデータを取得したい場合などはuseEffectでuserの更新を待つとできる。

import { ReactNode, useEffect, useState } from 'react'

const SomeComponent = () => {
  const [user, setUser]: any = useAuth() // 別ファイルのuseContextによって使用するstate
  const [node, setNode] = useState<ReactNode>(<p>loading</p>)

  useEffect(() => {
    if (user === undefined) {
      setNode(<p>loading</p>)
    } else {
      (async () => {
        data = await fetch() // user.id を使ってデータをfetch
	setNode(<p>{data}</p>)
      })()
    }
  }, [user])
  return node
}