はじめに

• Reactのコンポーネントでは、APIリクエスト中にLoading...を表示したり、エラーが発生した場合にエラーメッセージを表示するなどの処理が必要になる。
• コンポーネントごとに同じような処理を書くのは冗長。
• そこで、HOC（Higher-Order Component）を使って共通処理をまとめる方法について考えてみた。

実現方法

• withLoadingというHOCを作成し、共通処理を記述する。
• withLoadingは、isLoadingプロパティがtrueの場合はLoading...を表示し、falseの場合はラップされたコンポーネント（WrappedComponent）を表示。

// withLoading.tsx
const withLoading = (WrappedComponent: React.FC) => (props) => {
  if (props.isLoading) {
    return <div>Loading...</div>;
  }
  if (props.error) {
    return <div>Error: {props.error.message}</div>;
  }
  return <WrappedComponent {...props} />;
}

使い方

• 以下の例では、MyComponentをwithLoadingでラップする。
• これにより、ローディング状態とエラー状態の表示をMyComponentから分離できる。

// MyComponent.tsx
export const MyComponent = withLoading(({ data }) => {
  return <div>{data}</div>
})

// App.tsx
const App = () => {
  const { data, isLoading, error } = useSWR('api/endpoint', fetcher)
  return <MyComponent data={data} isLoading={isLoading} error={error} />
}

• withLoadingを使用することで、他のコンポーネントでも共通処理を簡単に再利用できるようになる。

まとめ

• HOCは、ローディング処理やエラー表示などの共通処理をコンポーネント間で再利用するための強力な手段。
• ロギングなど、他の共通処理にもHOCを利用することが可能。

参考

• HOC(Higher Order Component)とは