【結論】Reactコンポーネントを安全に改善する
React開発では、Claude Codeへ一律にuseMemoやuseCallbackを追加させず、React Profilerと実測に基づいて最適化します。
プロジェクトのReact、TypeScript、Router、状態管理、CSS、テスト規約を確認し、既存パターンを維持します。
コンポーネント分割は責務、状態所有、再利用性、アクセシビリティを基準に判断します。
# ターミナルで実行：React環境を確認
cat package.json
# ターミナルで実行：既存テストを実行
npm test -- --runInBand
# ターミナルで実行：型検査を実行
npm run typecheck
# ターミナルで実行：Planモードで起動
claude --permission-mode plan具体的な手順・設定方法
対象コンポーネント、現在の状態管理、レンダリング問題、期待UIを確認します。
分割案、Props、状態の配置、アクセシビリティ、テスト変更を先に提示させます。
最小差分で実装し、ユニットテスト、ブラウザ、キーボード操作、Profilerを確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
App.tsxの分割計画を作成してください。
Header、Sidebar、MainContentの責務、Props、状態所有、テスト境界を示してください。
useMemoとuseCallbackは実測根拠がある場合だけ提案し、承認まで編集しないでください。注意点・よくあるエラーと対処法
依存配列を機械的に変更すると無限ループや古いClosureを生む可能性があります。
React.FCを使うかどうかはチーム規約であり、普遍的な正解ではありません。
見た目だけでなく、Semantic HTML、Label、Focus、Reduced Motionを確認してください。