useEffectを使っているタイミング

sample.tsx

// firebase authを使って、ログインユーザーが変わった時に何か取得する
export const Sample1: VFC = () => {
  const [authState, setAuthState] = useState()

  useEffect(() => {
    if (!process.browser) return
    let cancel = false

    const unsubscribe = auth.onAuthStateChanged(
      async firebaseUser => {
        if (cancel) return
        if (firebaseUser) {
          setAuthState(firebaseUser)
          return
        }

        setAuthState(undefined)
      },
      error => {
        if (cancel) return
        console.error(error)
      }
    )

    return () => {
      cancel = true
      unsubscribe()
    }
  }, [process.browser])

  useEffect(() => {
    if (!authState) return
    fetchSomeData()
  }, [authState])

  return <></>
}

// ECや不動産探すサービスのような、検索のフィルターをクエリストリングで表現していて、クエリが変わった時に再検索したい場合
export const Sample2: VFC = () => {
  const router = useRouter()

  useEffect(() => {
    fetchSomeData()
  }, [router.query])

  return <></>
}

// 日付の範囲を入力するようなフォームで、片方が変わったらもう片方を変えたい場合
// 力尽きて例はなしごめんなさい…