Provides best practices and decision logic for implementing React useEffect hooks, specifically focusing on when to use effects for external synchronization versus when to use alternatives like event handlers, derived state, or useMemo.
Quality gate: PASS · better answers · measured 2026-10-24 Blind-judged against the bare model on 2 requests: average lift +1.0 points (specificity, structure, method, fit). won 1/2, lift +1.0, tokens ×13.44
Security scan: clean · 2026-10-24 · 4 files · ran in sandbox no network calls, shell tricks, credential access or instruction tampering found in its files.
Try asking
Say it in your own words; the assistant finds this recipe by itself. Examples:
“Jeg bruger useEffect til at beregne en sum ud fra et array. Er det bedst at bruge useMemo i stedet?”
“Hvordan håndterer jeg datafetching korrekt i React uden at få race conditions?”
“Min useEffect kører hver gang en prop ændres, men jeg vil gerne nulstille en lokal state. Er der en bedre metode?”
“I have a useEffect that updates a state variable whenever a prop changes. Is this the right way to handle it?”
“Review my code: I'm using useEffect to calculate the total price from a list of items. Can I optimize this?”
“How should I fetch data in a React component using useEffect? I keep getting stale state warnings.”
Try this skill from Claude, ChatGPT or a chat on your own page. Free plan, no credit card.Get started free
Do not use this skill for general React component structure questions unrelated to side effects or state synchronization. It is not for debugging runtime errors in other hooks like useReducer or useContext unless they involve effect logic. For complex state management libraries like Redux or Zustand, use specific library documentation skills instead.
Details
When it is the right choice
Use this skill when writing new useEffect hooks or reviewing existing code that uses useEffect to ensure it follows official React documentation recommendations. It is appropriate when deciding between useEffect, useMemo, event handlers, or derived state calculations. It helps identify anti-patterns such as using effects for simple state derivation or user event responses.
The full recipe the assistant reads
You Might Not Need an Effect
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.
Quick Reference
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
When You DO Need Effects
Synchronizing with external systems (non-React widgets, browser APIs)
Subscriptions to external stores (use useSyncExternalStore when possible)
Analytics/logging that runs because component displayed
Data fetching with proper cleanup (or use framework's built-in mechanism)
When You DON'T Need Effects
Transforming data for rendering - Calculate at top level, re-runs automatically
Handling user events - Use event handlers, you know exactly what happened
Deriving state - Just compute it: const fullName = firstName + ' ' + lastName
Chaining state updates - Calculate all next state in the event handler
Decision Tree
Need 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