react-patterns
React 開発パターンとベストプラクティスをマスターする
プロダクション対応の React アプリケーションを自信を持って構築しましょう。フック、状態管理、コンポーネント設計の検証済みパターンを学べます。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-patterns」を使用しています。 Context と Zustand のようなグローバルストアはいつ使うべきですか？
期待される結果:
Context はテーマやロケールなど、コンポーネントツリー内での共有状態に使用します。Zustand は devtools、永続化が必要、または多くの無関係なコンポーネントからアクセスされるアプリ全体の状態に使用します。Context は内蔵ですが再レンダリングを引き起こす可能性があります。Zustand は頻繁な更新に対してより良いパフォーマンスを提供します。
「react-patterns」を使用しています。 マウント時のデータフェッチにこの useEffect は必要ですか？
期待される結果:
React 19 では、データフェッチには useEffect よりもサーバーコンポーネントや React Query などのデータフェッチライブラリを推奨します。useEffect は購読やデータ以外の副作用に適しています。データには、キャッシュ、重複排除、エラー状態を自動的に処理するライブラリを使用してください。
セキュリティ監査
安全All 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.
品質スコア
作れるもの
React 開発者のオンボーディング
新しいチームメンバーがあなたの React アーキテクチャパターンとコーディング標準を迅速に学べるように支援します。
コンポーネントリファクタリングのガイダンス
大規模コンポーネントを分解し、適切なフックパターンを適用するための推奨事項を取得します。
状態管理の意思決定
ニーズに基づいて useState からグローバルストアまで、適切な状態ソリューションを決定します。
これらのプロンプトを試す
React でカスタムフックを抽出するタイミングを説明してください。useLocalStorage パターンをコード例と共に示してください。
この React コンポーネントをレビューし、コンポーネント設計原則に基づいた改善点を提案してください。より小さなコンポーネントに分割すべきか識別してください。
ユーザー認証、テーマ設定、リアルタイム通知機能を持つアプリがあります。状態管理アプローチを推奨し、その理由を説明してください。
React 19 コンパイラがメモ化パターンに与える影響を説明してください。どの useMemo と useCallback の呼び出しを削除できるか示してください。
ベストプラクティス
- 最適化する前にパフォーマンスをプロファイリング - 実際のボトルネックをまず測定
- 継承よりもコンポジションを優先 - 小さく焦点を絞ったコンポーネントを構築
- リストレンダリングには配列インデックスではなく安定した一意のキーを使用
回避
- 深い props ドリリング - 代わりに Context やコンポーネントコンポジションを使用
- 複数の責任を持つ巨大なコンポーネント - より小さな単位に分割
- すべてに useEffect を使用 - 適切な場所でサーバーコンポーネントを活用