[React]定義したカスタムフックの戻り値が空のオブジェクトになってしまう

Question

聞きたいこと

React/NextjsにてWebアプリを作成しています。
pageコンポーネントにて定義していたロジックを、カスタムコンポーネントに移動した際に動作しなくなってしまったため質問させてください。

詳細

もともとページコンポーネントに実装していた内容は下のとおりです。

• pages/index.ts

import * as React from 'react';
import { useRouter } from 'next/router';

// これはバックエンドAPIと疎通してユーザー情報を取得する関数です
import { fetchUser } from '@/repositories';
:

const Index: React.FC = (): React.ReactElement => {
  const router = useRouter();
  const { id } = router.query;
  let user = {};

  React.useEffect(() => {
    fetchUser(id).then((u) => {
      user = u;
    })
  }, [router])

  return (
    <div>Index Page {user}</div>
  )
}

上で実装したuseEffectの部分をカスタムフックとして外出しした結果が下のとおりです。

• pages/index.ts

import * as React from 'react';

:

const Index: React.FC = (): React.ReactElement => {
  const user = useUser();

  return (
    <div>Index Page {user}</div>
  )
}

• hooks/index.ts

import * as React from 'react';
import { useRouter } from 'next/router';

import { fetchUser } from '@/repositories';

:

export const useUser = () => {
  const router = useRouter();
  const { id } = router.query;
  let user = {};

  React.useEffect(() => {
    fetchUser(id).then((u) => {
      user = u;
    })
  }, [router])
  
  return user;
}

:

カスタムフック移行後は、カスタムフック内で定義したuser変数を返すようにしていますが、
pageコンポーネント内で表示すると、user変数の初期値である空のオブジェクトになってしまいます。

Answer 1

Reactでデータの状態を管理するにはuseStateを使う必要があります
次のようにすれば正しく変更されるはずです

export const useUser = () => {
  const router = useRouter();
  const { id } = router.query;
  const [user, setUser] = React.useState({});

  React.useEffect(() => {
    fetchUser(id).then((u) => {
      setUser(u)
    })
  }, [router])

  return user;
}

Answer 2

useEffect の動きから考えてみましょう。最初の例では router が変更されることによって useEffect に渡された関数が発火し user が変更されてそれが表示に反映される、という仕組みですね。

これを二番目のようにカスタムフックに切り出すと何が起こるかと言うと router の変更によって useEffect に渡された関数が発火し user が変更されるところまでは変わりません。ところがこのカスタムフックでは早々に user に最初から入っている {} を返し役目を終えてしまいます。React はカスタムフック内にいる単なる「値」である user の変更までは追うことができません。ではどのように解決すべきでしょうか。

考えてみるとこの関数は user という「状態」を持っていることになります。つまり useState を使えばこの状態を外に持ち出すことができます。

export const useUser = () => {
  const router = useRouter();
  const { id } = router.query;
  const [user, setUser] = useState({});

  React.useEffect(() => {
    fetchUser(id).then((u) => {
      user = u;
    })
    setState(u);
  }, [router])

  return user;
}

この場合も user は単なる値ですが、setUser を使い React によって更新されうる点が違います。一番目の例でも状態を持つことができますが、状態を持つ場合明示的に useState を使ったほうが見通しが良くなるでしょう。