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 사용 및 불필요한 Effect 방지를 위한 지침입니다. useEffect, useState를 사용하거나 부작용을 처리하는 React 구성 요소를 작성, 검토 또는 리팩토링할 때 사용합니다. React Effects, 파생 상태, 이벤트 핸들러, 데이터 가져오기 또는 구성 요소 동기화와 관련된 작업을 트리거합니다. 출처: nbbaier/agent-skills.

원본 보기