React
Reactでは、UIを状態から導く純粋なレンダーとして保ちます。APIやHooksの一般的な説明はReact、レンダリングやroutingの仕様はプロジェクトで採用しているフレームワークの公式ドキュメントを正本とします。
基本方針
- props、state、contextを同じ入力として扱い、レンダー中に副作用を起こさない
- propsやstateから計算できる値は、別のstateへ複製せずレンダー中に導出する
- イベントハンドラは関数として渡し、レンダー中に呼び出さない
- Effectは外部システムとの同期に限定する
- loading、empty、error、disabledを成功状態と同じ設計対象にする
概要
レンダリング方式は、更新頻度、公開範囲、SEO、認証から画面ごとに選びます。SSR、静的生成、SPAの選択と、Server ComponentとClient Componentの境界はレンダリングで扱います。
コンポーネントは、見た目の断片ではなく役割と状態の境界で分けます。分割の基準、データとの境界、必須の状態、メモ化の判断はコンポーネントにまとめます。値をどこに置くかは状態管理、コンポーネント、Hook、テストをどのディレクトリへ置くかはコロケーションで扱います。