// React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
Design review and implementation guidance for the Qovery Console. Use for auditing UI components, refining spacing and color, selecting the right shared component, writing microcopy, and designing new surfaces from scratch.
Qovery Console coding standards, architecture guidelines, naming conventions, testing practices, and development workflows. This skill should be used when writing, reviewing, or refactoring code in the Qovery Console monorepo to ensure consistency and quality.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
| name | react-useeffect |
| description | React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives. |
Effects are an escape hatch from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.
| Situation | DON'T | DO |
|---|---|---|
| Derived state from props/state | useState + useEffect | Calculate during render |
| Expensive calculations | useEffect to cache | useMemo |
| Reset state on prop change | useEffect with setState | key prop |
| User event responses | useEffect watching state | Event handler directly |
| Notify parent of changes | useEffect calling onChange | Call in event handler |
| Fetch data | useEffect without cleanup | useEffect with cleanup OR framework |
useSyncExternalStore when possible)const fullName = firstName + ' ' + lastNameNeed to respond to something?
āāā User interaction (click, submit, drag)?
ā āāā Use EVENT HANDLER
āāā Component appeared on screen?
ā āāā Use EFFECT (external sync, analytics)
āāā Props/state changed and need derived value?
ā āāā CALCULATE DURING RENDER
ā āāā Expensive? Use useMemo
āāā Need to reset state when prop changes?
āāā Use KEY PROP on component