2022年4月4日JavaScriptツイートシェアはてブ送るPocket前回、【React】カスタムフックの概要・メリット・使いどころでカスタムフックの概要について紹介しました。今回はカスタムフックの具体的な作成手順について紹介します。さいごに今回利用するサンプルコードについて今回は『API経由で取得したTodoリストの内容を表示する』というコンポーネントを例にカスタムフックの作成手順について紹介します。最終的には『Todoリストの内容を表示するコンポーネント』と『API経由でTodoリストを取得するカスタムフック』に分割します。以下はカスタムフック導入前のコンポーネントです。データ取得とUI構築のコードが混在しているため可読性があまりよくありません。以下は今回のゴールであるカスタムフック導入後のコードです。App;今回はあくまでカスタムフックを理解するためのサンプルコードです。API経由のデータ取得は例えばSWRを利用する方法などもあります。カスタムフックの実装の手順についてカスタムフックの実装の手順をまとめると以下のようになります。カスタムフックの実装手順コンポーネントのコードから分離させたいフックを検討する関連するフックをカスタムフックへ移動するコンポーネントで利用するデータをカスタムフックの戻り値にするコンポーネントからカスタムフックを呼び出す以下ではそれぞれの手順について説明します。コンポーネントのコードから分離させたいフックを検討するコンポーネントからカスタムフックへ実装を移動させるフックの検討をします。コンポーネントから分離したほうがよいフックは以下の通りです。コンポーネントからの分離を検討したほうがよいフック処理が複雑なフック複数のコンポーネントで同じ実装がされているフックデータ取得に関する(Viewに関係しない)フック関連するフックをカスタムフックへ移動する分離したいフックの検討が終わったら、関連するフックをカスタムフックへ移動します。今回は『Todoリストの取得』に関するフックをカスタムフックにしたいので、Todoリストを保存するuseStateとTodoリストを取得するuseEffectを移動します。useTodos;コンポーネントで利用するデータをカスタムフックの戻り値にする今回の場合、コンポーネントではTodoリストのデータを利用します。カスタムフックの戻り値はTodoリストの保存されたオブジェクトにします。useTodos;コンポーネントからカスタムフックを呼び出すコンポーネントでカスタムフックをimportし、カスタムフックの戻り値を変数で受け取ります。あとは受け取った変数を利用してUIを構築すればOKです。App;以上でカスタムフック導入後のコードが完成します。さいごにTwitter(@nishina555)やってます。フォローしてもらえるとうれしいです!RECOMMENDJavaScriptReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。