playbooks

home / skills / jarrodwatts / claude-code-config / react-useeffect

react-useeffect skill

/skills/react-useeffect

This skill guides you on when to use React useEffect, optimize data fetching, and apply alternatives for derived state and events.

npx playbooks add skill jarrodwatts/claude-code-config --skill react-useeffect

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
2.3 KB
---
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.
---

# 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

1. **Transforming data for rendering** - Calculate at top level, re-runs automatically
2. **Handling user events** - Use event handlers, you know exactly what happened
3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`
4. **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
```

## Detailed Guidance

- [Anti-Patterns](./anti-patterns.md) - Common mistakes with fixes
- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore

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

FAQ

When is useEffect the right choice?

Use it when you must interact with external systems, run one-time lifecycle work, or subscribe to data sources that live outside React.

What should I do instead of using useEffect for derived values?

Compute the derived value during render. If the computation is expensive, wrap it in useMemo.