Pageコンポーネントの共通処理をHOCにする

Reactでは継承よりも、HOCを使うのが推奨されている。HOCとはHigher Order Componentの略で、コンポーネントを引数にとってコンポーネントを返す関数のこと。

なので、たとえば似たような前処理をするページコンポーネントが複数あったとして、その共通処理を書く場合、

export default class UsersDetailPage extends UsersPage { ... }

みたいなことはせず

export default enhanceUsersPage(UsersDetailPage)

みたいな感じになる。

なんで継承じゃなくて関数...？という疑問は当然出てくるけど、以下に

Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

reactjs.org

と書かれて強調されているように、HOCはもとのコンポーネントの振る舞いは一切変えない。

HOCにコンポーネントを渡せば振る舞いが追加されたコンポーネントとして使えるし、HOCに渡さずそのままコンポーネントを使うこともできる。