React: コンポーネントのロジックをカスタムフックに切り出す ー カウンターの作例で - Qiita

Reactにフックが採り入れられて、関数コンポーネントに状態をもたせられるようになりました。 「フックとは、関数コンポーネントにstateやライフサイクルといった Reactの機能を「接続する」(hook into)ための関数です」(「要するにフックとは？」)。さらに、フックを独自につくって、コンポーネントからロジックを切り出すこともできます。そうすれば、コンポーネントのコードがすっきり見やすくなるとともに、そのカスタムフックを使い回すこともできるのです。 自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。 (「独自フックの作成」より) 本稿は簡単なカウンターの作例をとおして、フックの役割や考え方について解説します。 Create React Appでアプリケーションのひな形をつくる まず、Reactアプリケーションのひな形は、Cr