昨日に引き続き今日もReact！React！
ちょっとずつ感覚でコードが打てるようになってきたぞ

本日の学び✍️

今日はカスタムフックについて学習しました！

カスタムフックとは

コンポーネントに直接処理を書くのではなく、1つの機能を1つのファイルに切り出してフックスとして定義した関数のことだと理解しました！

メリット

複数のReact Hooksを1つの関数内でまとめることができる。

使用方法

暗黙のルールとしてReact Hooksのようにuse〜〜と命名するべき。

//親コンポーネント
const { name, address } = useCompanyInfo();

//カスタムフックを定義したファイル
export const useCompanyInfo = () => {
  const [companyProfiles, setCompanyProfiles] = useState<Array<CompanyProfile>>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  //処理は省略

  return { companyProfiles, error, loading };
};

カスタムフックスの中で複数のReact Hooksを使用することができました！
またコンポーネント内で複雑な処理を長々と書かなくても良いので、全体的に見通しの良い設計にできそうです！

まとめ🙆‍♂️

正直カスタムフックについてはもっと実践を積まないと理解できないかな〜と思いました🤔