react-useeffect_skill

Overview

This skill teaches React useEffect best practices distilled from official guidance. It helps you decide when to use effects, when to avoid them, and which alternatives (useMemo, key prop, event handlers, lifting state) lead to simpler, safer components. Use it while writing or reviewing components that synchronize state, fetch data, or derive values.

How this skill works

The skill inspects component intent and common patterns to recommend whether an effect is necessary. It flags anti-patterns such as using useState + useEffect for derived values, chaining state updates in effects, or using effects for event responses. When an effect is appropriate it suggests correct cleanup and alternatives like useSyncExternalStore or framework data fetching.

When to use it

• When synchronizing with external systems or browser APIs (e.g., DOM widgets, timers)
• When subscribing to external stores or sockets (prefer useSyncExternalStore when available)
• When running analytics or logging once when a component appears
• For data fetching that requires cleanup or cancellation
• When you must perform side effects tied to component lifecycle

Best practices

• Avoid effects for derived values—compute during render; use useMemo only for expensive work
• Handle user interactions directly in event handlers instead of effect watching state
• Resetting component state on prop change: prefer using a key prop over setState in an effect
• Call parent callbacks in the event handler that caused the change instead of inside an effect
• When using effects for subscriptions or fetches always include proper cleanup to avoid leaks

Example use cases

• Compute a formatted fullName directly in render instead of useState + useEffect
• Attach and detach a DOM event listener with useEffect and a cleanup function
• Fetch data on mount with useEffect and cancel on unmount or use a framework hook
• Use key prop to remount a child component when a prop changes that requires reset
• Use event handlers to call onChange and derive next state before setting local state