---
name: React UseEffect
slug: react-useeffect
category: Frontend
description: React UseEffect covers when to use effects and when to avoid them. Use it for reviewing or writing useEffect code, derived state, data fetching, and state synchronization.
github: "https://github.com/jarrodwatts/claude-code-config/tree/main/skills/react-useeffect"
language: JavaScript
stars: 1058
forks: 121
install: "npx degit https://github.com/jarrodwatts/claude-code-config/tree/main/skills/react-useeffect ~/.claude/skills/react-useeffect"
installs_to: ~/.claude/skills/react-useeffect
source_path: skills/react-useeffect/SKILL.md
collection_size: 5
category_size: 567
collection_url: "https://dirskills.com/collections/jarrodwatts/claude-code-config"
added: 2026-08-21T05:13:39.145Z
last_synced: 2026-08-21T05:13:39.145Z
canonical_url: "https://dirskills.com/skills/react-useeffect"
---

# React UseEffect

React UseEffect covers when to use effects and when to avoid them. Use it for reviewing or writing useEffect code, derived state, data fetching, and state synchronization.

**Install:**

```bash
npx degit https://github.com/jarrodwatts/claude-code-config/tree/main/skills/react-useeffect ~/.claude/skills/react-useeffect
```

## README

# 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