記事を書いた背景

こんにちは！
最近ReactとRailsでマーケットプレイスアプリケーションと記事投稿アプリケーションを作りました。
最初にマーケットプレイスアプリケーションを作った際に、バックエンドからデータを取得するときにaxios通信を使いました。そのときuseCallbackを使用しました。
次に記事投稿アプリケーションを作ったのですが、バックエンドからデータを取得する機能をつける際にuseEffectを使う方法があると気づきました。

どのような違いがあって、どんな場面でどちらを使うといいのか、こちらに書いていこうと思います！

useEffectの基本構造

useEffect（実行する関数, [着目したい値]);

React Hooksの基本のフックの一つ。
[]に変数などの値を入れて、その値が変化した時に関数を実行できます。
[]に何も入れずに空配列で使用すると、最初の一回だけ実行したい処理を実行できます。
この方法は初期データを取得する時などに使われます。

今回の使用方法(useEffect)

記事投稿アプリケーションを作るにあたり、axios通信を使用してバックエンドから記事一覧を表示する際に使用しました。
コードは以下のように書きました。
※今回はuseEffect部分について着目するため、useEffect部分のみ抜粋します。

app/src/components/hooks/useAllPosts.ts

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get<PostWithIdType[]>('http://localhost:3001/posts');
        setPosts(response.data);
      } catch (error) {
        setError(true);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

　(バージョン"react": "^18.2.0","typescript": "^4.4.4")
こちらのコードではaxiosを使用してgetメソッドでバックエンドURLの情報を取得し、一覧表示データをフロントへ返しています。
記事一覧情報取得はページを表示する際に一度だけ読み込まれる必要があります。
そのため、useEffectの第二引数は空配列[]にしています。

useCallbackの基本構造

const 関数名　= useCallback（実行する関数, [着目したい値]);

useCallbackは関数のメモ化をします。
関数が毎回呼ばれてしまうのを防ぐことができます。
useEfffectと同じく、[]の値が変化すると第一引数の関数が実行されます。

今回の使用方法(useCallback)

マーケットプレイスアプリケーションを作るにあたり、axios通信を使用してバックエンドから商品一覧を表示する際にuseCallbackを使用しました。
コードは以下のように書きました。
※今回はuseCallback部分について着目するため、useCallback部分のみ抜粋します。

 const getItems = useCallback(() => {
   axios
   .get<Array<Item>>("http://localhost:3000/items")
   .then((res) => setItems(res.data));
 }, []);

(バージョン"react": "^18.2.0", "typescript": "^4.9.3")

useEffectとuseCallbackどちらを使用するのが良い？

どちらの機能も一言で表すと"着目している値が変化した時に関数を実行させる"機能です。
今回のように、バックエンドからデータ一覧を取得して表示する際にはuseEffectとuseCallback、どちらを取得するのが良いのでしょうか？

着目する点は、useCallbackは再レンダリングによる不必要な関数生成を防ぐために使うという点です。
今回は不必要に何度も呼ばれてしまう関数はありません。
そのため、useEffectの使用が適切です。

以上、useEffectとuseCallbackの使い分けでした！
最後まで読んでくださり、ありがとうございました。