dream-image/use-react-effect

use-react-effect は何をしますか？

React Effectの正しい使い方、リファクタリング、レビューのためのCodexスキル

概要

このスキルは、ReactのuseEffectを適切に使用し、リファクタリングし、レビューするためのガイドラインを提供します。依存関係の管理、クリーンアップ、Effectの分割など、一般的な落とし穴を回避するためのベストプラクティスに焦点を当てています。

主要な機能

• 依存配列の最適化: 必要な依存関係のみを含め、不要な再実行を防ぎます。
• クリーンアップ関数: メモリリークや不要な副作用を防ぐために、適切なクリーンアップを実装します。
• Effectの分割: 単一責任の原則に従い、複数のEffectに分割することで可読性と保守性を向上させます。
• リファクタリングパターン: useEffectをカスタムフックに抽出したり、より宣言的なパターンに置き換える方法を提案します。

使用方法

Codex環境でReactコンポーネントを記述またはレビューする際に、このスキルが自動的に適用されます。以下のようなシナリオで特に役立ちます。

• 新しいEffectを作成するとき
• 既存のEffectをレビューまたはリファクタリングするとき
• Effectに関連するバグをデバッグするとき

例

// 非推奨: 依存関係が不足している
useEffect(() => {
  fetch(`/api/users/${userId}`).then(...)
}, []) // userIdが依存関係に含まれていない

// 推奨: 適切な依存関係
useEffect(() => {
  fetch(`/api/users/${userId}`).then(...)
}, [userId])

注意事項

• このスキルは、Reactの公式ドキュメントやベストプラクティスに基づいています。
• すべてのケースに適用できるわけではありません。コンポーネントの具体的なコンテキストに応じて判断してください。