react-effect-patterns

SKILL.md

Effects are an escape hatch from React for synchronizing with external systems. Removing unnecessary Effects makes code easier to follow, faster to run, and less error-prone.

| Transform data | Calculate during render | | Expensive calculation | useMemo | | Reset all state on prop | key attribute | | Adjust state on prop | Derive during render | | Share event logic | Extract function, call from handlers | | User events | Event handlers | | External system sync | Effect | | Notify parent | Update in handler or lift state |

| Init once | Module-level or guard variable | | External store | useSyncExternalStore | | Fetch data | Effect with cleanup |

React を適切に使用するためのガイドライン。Effect の使用方法と不要な Effects を避けるためのガイドライン。 useEffect、useState、または副作用を処理する React コンポーネントを作成、レビュー、またはリファクタリングするときに使用します。 React エフェクト、派生状態、イベント ハンドラー、データのフェッチ、またはコンポーネントの同期に関連するタスクをトリガーします。 ソース: nbbaier/agent-skills。

原文を見る