公開日:2022.01.21

コンポーネントとロジックを分離する~Reactカスタムフック~

テクログ

はじめに

Reactコンポーネントとロジックの分離について、公式ドキュメントを参考にまとめていきます。
以下の要点に注目していきます。

  • Reactフックとは
  • Reactフックの何が良いのか
  • Reactビルトインフック
  • Reactカスタムフック
  • コンポーネントとロジックを切り分ける基準についての考察

Reactフックとは

まずはReactフックとは何かを学んでいきます。

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

つまり状態管理を関数コンポーネントで扱えるようになるということです。

Reactが提供しているビルトインのフックもあれば、独自のフックを作成することもできます。

Reactフックの何が良いのか

Reactフックを使う最大の利点はコンポーネントとロジックを分離し、疎結合にできることであると思います。
コンポーネントは画面の描画、フックはロジックでそれぞれの責務に集中することができます。

これにより、分離したロジックを単独でテストすることが可能になったり、ステートを持ったロジックを階層を超えてあらゆるコンポーネントで呼び出して再利用できるようになります。

また、当然コンポーネントの記述はシンプルになり可読性も向上します。

Reactビルトインフック

Reactが提供しているフック一覧です。

フック名 できること備考
useState状態の保持と更新
useEffectDOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用
useContextコンテクストオブジェクト(React.createContext からの戻り値)を受け取り、そのコンテクストの現在値を返す
useReducer状態の保持と更新複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合に使用する
useCallbackメモ化されたコールバックを返すコールバックをメモ化したものを返し、その関数は依存配列の要素のいずれかが変化した場合にのみ変化する
useMemoメモ化された値を返す依存配列の要素のいずれかが変化した場合にのみメモ化された値を再計算する
useRefあらゆる書き換え可能な値を保持しておく子コンポーネントに命令型でアクセスしたい場合に使用する
useImperativeHandleref が使われた時に親コンポーネントに渡されるインスタンス値をカスタマイズするforwardRef と組み合わせて使う
useLayoutEffectDOM の変更があった後で同期的に副作用を呼び出す基本的に非推奨であり、DOM からレイアウトを読み出して同期的に再描画を行う場合に使用する
useDebugValueReact DevTools でカスタムフックのラベルを表示するすべてのカスタムフックにデバッグ用の値を加えるのは非推奨であり、共有ライブラリ内のカスタムフックで使用することを推奨

Reactカスタムフック

カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せるJavaScriptの関数のことです。

コンポーネントとロジックを切り分ける基準についての考察

Reactコンポーネントとロジックを切り分ける基準については上記の通り、公式が答えを出しています。
ほかのフックを呼び出せるJavascriptの関数から分かるように、Reactコンポーネントからはフックを使用するロジックを関数としてカスタムフックに分離するが正解であるということです。

であれば、フックを使用しないロジックはカスタムフックとして分離することが望ましくないので、関数としてutils等に分離するのが良いのではないかと思います。

おわりに

公式ドキュメントを読む前はコンポーネントとロジックを切り分ける基準が曖昧でしたが、これで基準が明確になりました。
公式ドキュメントを読むのは本当に大事ですね。

参考文献

この記事を書いた人

棒人間

入社年2019年

出身地東京都

業務内容開発

特技または趣味スケボー

棒人間の記事一覧へ

テクログに関する記事一覧