2022.01.21
STAFF BLOG
スタッフブログ
TECHNICAL
テクログ
はじめに
Reactコンポーネントとロジックの分離について、公式ドキュメントを参考にまとめていきます。
以下の要点に注目していきます。
- Reactフックとは
- Reactフックの何が良いのか
- Reactビルトインフック
- Reactカスタムフック
- コンポーネントとロジックを切り分ける基準についての考察
Reactフックとは
まずはReactフックとは何かを学んでいきます。
フック （hook） は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
つまり状態管理を関数コンポーネントで扱えるようになるということです。
Reactが提供しているビルトインのフックもあれば、独自のフックを作成することもできます。
Reactフックの何が良いのか
Reactフックを使う最大の利点はコンポーネントとロジックを分離し、疎結合にできることであると思います。
コンポーネントは画面の描画、フックはロジックでそれぞれの責務に集中することができます。
これにより、分離したロジックを単独でテストすることが可能になったり、ステートを持ったロジックを階層を超えてあらゆるコンポーネントで呼び出して再利用できるようになります。
また、当然コンポーネントの記述はシンプルになり可読性も向上します。
Reactビルトインフック
Reactが提供しているフック一覧です。
| フック名 | できること | 備考 |
| useState | 状態の保持と更新 | |
| useEffect | DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用 | |
| useContext | コンテクストオブジェクト（React.createContext からの戻り値）を受け取り、そのコンテクストの現在値を返す | |
| useReducer | 状態の保持と更新 | 複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合に使用する |
| useCallback | メモ化されたコールバックを返す | コールバックをメモ化したものを返し、その関数は依存配列の要素のいずれかが変化した場合にのみ変化する |
| useMemo | メモ化された値を返す | 依存配列の要素のいずれかが変化した場合にのみメモ化された値を再計算する |
| useRef | あらゆる書き換え可能な値を保持しておく | 子コンポーネントに命令型でアクセスしたい場合に使用する |
| useImperativeHandle | ref が使われた時に親コンポーネントに渡されるインスタンス値をカスタマイズする | forwardRef と組み合わせて使う |
| useLayoutEffect | DOM の変更があった後で同期的に副作用を呼び出す | 基本的に非推奨であり、DOM からレイアウトを読み出して同期的に再描画を行う場合に使用する |
| useDebugValue | React DevTools でカスタムフックのラベルを表示する | すべてのカスタムフックにデバッグ用の値を加えるのは非推奨であり、共有ライブラリ内のカスタムフックで使用することを推奨 |
Reactカスタムフック
カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せるJavaScriptの関数のことです。
コンポーネントとロジックを切り分ける基準についての考察
Reactコンポーネントとロジックを切り分ける基準については上記の通り、公式が答えを出しています。ほかのフックを呼び出せるJavascriptの関数から分かるように、Reactコンポーネントからはフックを使用するロジックを関数としてカスタムフックに分離するが正解であるということです。
であれば、フックを使用しないロジックはカスタムフックとして分離することが望ましくないので、関数としてutils等に分離するのが良いのではないかと思います。
おわりに
公式ドキュメントを読む前はコンポーネントとロジックを切り分ける基準が曖昧でしたが、これで基準が明確になりました。
公式ドキュメントを読むのは本当に大事ですね。
