第２回 HOC Pattern | React デザインパターン入門

この記事は、React デザインパターン入門シリーズの第2回です！

第1回では、Compound Pattern を紹介しました. 第2回目は、HOC Pattern です.
(第1回の内容は、この記事には一切関係ないのでご安心ください)疎結合

HOC Pattern の概要

HOC とは、Higher-Order-Component の略です. 名前からは、component をどんどん重ねて、並べていくというようなイメージが付きます. このパターンでは、関数として表現されるコンポーネントを引数として受け取り、新しい機能を追加した別のコンポーネントを返します. こうすることで、ロジックの抽象化を行い、関心の分離ができます.

使い所

使い所としては、「複数のコンポーネントで全体的に共通して使いたいロジックやスタイルを適用する時」です.
上の説明と照らし合わせると
関数として表現されるコンポーネント = 複数のコンポーネント (個々のコンポーネント)
新しい機能 = 共通して使いたいロジックやスタイル

ex) 認証のロジック, 共通して使いたいスタイルなんかを使い回すときに、便利そうです.

HOCパターンを使った実装例

今回は、認証ロジックを HOC パターンを使って実装する例を示します.

以下のようなシンプルなページコンポーネントがあるとします.

このページを認証済みの時のみ表示されるようにします.

const SamplePage = () => <h2>User Page</h2>;

export default function App() {
  return <SamplePage />;
}

HOCパターンを使って認証ロジックを閉じ込める

import { ComponentType } from "react";

const withAuth = <P extends {}>(Component: ComponentType<P>) => {
  return (props: P) => {
    //何らかの認証の処理を挟む
    const isAuthorized = true;

    return isAuthorized && <Component {...props} />;
  };
};

これは、任意のコンポーネントを受け取り、認証処理を挟み、認証済みの場合は受け取ったコンポーネントを返すようにします.

こうしてあげることで、認証のロジックを withAuth の中に閉じ込めることができます.

HOCパターンを使う側のコード

使う時は、引数としてさっきのページコンポーネントを渡すだけ.

const AuthorizedPage = withAuth(SamplePage);

export default function App() {
  return <AuthorizedPage />;
}

メリット
汎用的なロジックをラップするだけで使い回せる
→ カスタマイズ不要 & たくさんのコンポーネントで共通のロジックは、HOCパターンで実装！

デメリット
コンポーネントツリーの階層が簡単に深くなる.
以下のようなケースでは、hooks が適しています.

• カスタマイズが必要
• 一つ、もしくは少数のコンポーネントでしか共通しないロジック
• たくさんのプロパティを HOC の中で設定する場合
  • 中で色々行われると、予期せず HOC で上書きされちゃう
  • 汎用性が薄くなり、HOC を使う意味がなくなる

→ 大抵の場合 hooks が最適解！！

技に溺れないようにする.