BFE.devでのAI解答例 - フロントエンド面接質問
48. HOC(Higher Order Component)とは?

HOCとは、コンポーネントの機能を拡張したり、再利用性を高めるために使用される高階関数のことです。

例えば、あるコンポーネントにログイン状態を確認する機能を追加したい場合、HOCを使用して以下のように実装できます。

const withAuth = (WrappedComponent) => {
  return class extends React.Component {
    // ログイン状態の確認等の機能をここで実装する
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

// 具体的なコンポーネントをwithAuthでラップする
const MyComponentWithAuth = withAuth(MyComponent)

これにより、MyComponentWithAuthという新しいコンポーネントを作成し、ログイン機能を持つようにすることができます。また、複数のコンポーネントでログイン機能を使用したい場合も、同じHOCを適用することで再利用性を高めることができます。

HOCのメリットとしては、コンポーネントの機能を拡張することが容易であることや、複数のコンポーネントで共通の機能を再利用できることが挙げられます。しかし、HOCが入れ子になるとコードが読みにくくなることや、コンポーネントに必要なプロパティが明示的でなくなることなど、デメリットもあります。適切に使用することが重要です。