ReactでUI / hooks / servicesを分ける

1ファイルでfetch・変換・バリデーション・長いJSXを兼ねると、小さな変更でもリスクが上がります。境界があるとレビューとオンボーディングが速くなります。

実務ルール：UIはhooksを呼び、hooksはReact Query等経由でservicesへ。servicesはサーバー通信のみ（get/create/update/delete）。トーストや遷移は入れません。

フォームはフィールドごとのuseStateよりreact-hook-form＋スキーマ。mutation後はドメインのqueryKeyを正しくinvalidate。Dolphin Softwareはプロダクトでもマーケフォームでもこの分割を使います。