TL;DR
- React コンポーネントは、1 つの仕事だけを行う小さな単位に保つのがよい。
- 複雑なコンポーネントの分割に、初版では HOC Pattern を使っていたが、第 2 版では React Hooks を使う。
内容
コンポーネントの責任
React の強みは、Web アプリケーションをコンポーネントという個々の単位で表現できることである。ただし、どのロジックをどのコンポーネントに割り当てるべきかについて、明確なルールはない。
一般には、各コンポーネントが 1 つの仕事だけを行うように設計し、小さな単位に保つのがよいとされる（単一責任の原則）。何が「1 つの仕事」かは人間の直感に頼るので、自動では判断できない。それでも、コンポーネントは責任が増えて複雑になるほど管理が大変になるので、この考え方を持つとコードを管理しやすくなる。
Hooks によるリファクタリング
複雑なコンポーネントを分割する方法として、初版では HOC Pattern を使っていた。その後、代わりの手段として React Hooks が登場したので、第 2 版では Hooks を使ってリファクタリングする。具体例は次の 3 つである。
React DevTools を使ったデバッグ
React DevTools を使うときは、次の手順でデバッグするとよい。
- 予期しない出力を描画しているコンポーネントから調べる。
- 原因は Props の値にあるので、その Props を渡している親コンポーネントに移り、問題を起こしている箇所を探す。
- そのコンポーネントの単体テストを書きながら問題を特定し、直す。