カスタムフックとは

Reactのカスタムフックは、特定の機能やロジックを分離して再利用可能にすることで、コンポーネントコードの整理に非常に役立ちます。
本記事では、APIからデータを取得するためのカスタムフックを作成し、効率的なデータ取得と表示を実現する方法を紹介します。

カスタムフックの基本概念

Reactのカスタムフックは、特定の処理を他の関数やコンポーネントと分離し、コードの再利用性を高めるための関数です。useStateやuseEffectといったReactのフックを利用することで、カスタムフックは簡単にステートや副作用を管理できます。

たとえば、データ取得のロジックをカスタムフックに移動させると、異なるコンポーネントで同じ取得ロジックを使い回せるようになります。以下は、APIからデータを取得し、その結果やローディング状態、エラーメッセージを管理するカスタムフック useFetchData の例です。

実装例

以下のuseFetchDataは、任意のURLからデータを取得し、コンポーネントに返すための基本的なカスタムフックです。このフックは、データ、ローディング状態、エラーメッセージを含むオブジェクトを返します。

useFetchTasksの実装

useFetchTasksの動作

taskTypeを切り替えるたびに、フックが自動的に新しいタスクリストを取得しtasksに設定します。
isLoadingでローディング状態を管理し、取得が完了すると一覧が表示されるようにします。

useFetchTasks を使ったコンポーネントの実装

最後に、useFetchTasks を使ってデータを取得し、表示するコンポーネントを作成します。ボタンでタスクの状態を切り替えられるようにしてみましょう。

このコンポーネントは、以下のように動作します。

・taskTypeを変更するボタンがあり、それぞれのボタンをクリックすると、異なるタスクリストが取得されます。
・isLoadingを利用して、データ取得中にはローディングインジケーターを表示し、取得後にタスク一覧を表示します。

まとめ

カスタムフックを使うことで、ロジックをコンポーネントから分離し、再利用可能なコードとして保つことができます。
特にデータ取得のような一般的な処理は、カスタムフックにまとめておくことで、コードの見通しがよくなり、保守性も向上します。
Reactアプリケーションでデータ取得をシンプルかつ効率的に実装したい場合、カスタムフックは非常に強力なツールです。
[cv:issue_marketplace_engineer]