はじめに
Reactで関数の記述を行おうとしていたのですが、ApiフォルダとHooksフォルダのどちらに書けばよいかわからなくなったため、記事の執筆を行いました。
結論
Fetchを用いるようなApi通信を行う関数はApiフォルダに、内部の処理で完結し、外部との通信を行わないような処理はHooksフォルダに記述する。
前提
前提としてcomponentsフォルダに描画の処理を行い、その際に生じた関数の記述を分離することで可読性や再利用を行いやすくするためにHooksフォルダやApiフォルダに記述を行います。
ApiフォルダとHooksフォルダを使い分ける基準
外部との通信を行うときはApiフォルダに、内部で完結するような処理はHooksフォルダに記述する
具体例
以下のケースについて考えてみます。
登録ボタンを押して本の登録を行い、処理が完了したら登録ボタンが削除ボタンに変化する。
この時、それぞれのフォルダには以下の内容を記述します
-
componentフォルダ
フロントエンドのデザイン部分の記述を行い、ボタンがクリックされたらHooksフォルダを呼び出す。 -
Hooksフォルダ
呼び出されたらUsestateでボタンの状態を切り替え、削除ボタンや登録ボタンに変更する。また、Apiフォルダを呼び出す。 -
Apiフォルダ
登録ボタンが押されたときに、登録された内容が書き込まれるようにバックエンドのAPIにユーザ名と本の情報を渡す
このように、今回の例ではcomponents➡Hooks➡Apiの順で関数を呼び出します。
おわりに
Hooksフォルダに記述する関数は命名規則としてuseから始まります。