home / skills / nweii / agent-stuff / react-useeffect

react-useeffect skill

safe

This skill helps you optimize React useEffect usage by teaching when to use effects and when to derive values or prefer useMemo.

npx playbooks add skill nweii/agent-stuff --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. Use when writing Effects, derived values, or data fetching. Teaches when NOT to use Effects and better alternatives like useMemo or key props."
metadata:
  author: jarrodwatts
  source: https://github.com/jarrodwatts/claude-code-config
---

# 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 practical best practices for React useEffect so you write effects only when necessary and choose safer alternatives otherwise. It focuses on common anti-patterns, concrete replacements (useMemo, key prop, event handlers), and clear rules for when effects are the right tool. The guidance is concise, actionable, and aimed at reducing bugs and unnecessary complexity.

How this skill works

The skill inspects typical effect use cases and maps each to a recommended approach: calculate derived values during render, use event handlers for user-driven changes, prefer useMemo for expensive calculations, and use the key prop to reset component-local state. It highlights when effects are appropriate — external synchronization, subscriptions, analytics, and data fetching — and shows safer patterns and cleanup practices.

When to use it

Synchronizing with external systems (DOM APIs, non-React widgets, timers)
Subscribing to external stores or observable sources (useSyncExternalStore when applicable)
Running analytics or logging when a component mounts or becomes visible
Fetching remote data with proper cancellation/cleanup or via a data framework

Best practices

Avoid effects for derived values — compute them during render to keep UI predictable
Handle user interactions in event handlers; call props like onChange directly there
Use useMemo for expensive calculations instead of caching via useEffect + state
Reset component state by changing its key instead of syncing with props through an effect
When using effects for async work, always include cleanup/cancellation to avoid race conditions

Example use cases

Compute a combined fullName from first and last name directly in render instead of useEffect
Debounce input handling in an event handler or a controlled component, not by syncing state in an effect
Use useMemo to memoize a filtered list derived from props to avoid recomputation on each render
Attach a third-party widget or global event listener in an effect, and remove it in cleanup
Reset a form when a parent prop changes by rendering the form with a key tied to that prop

FAQ

If I remove an effect that derived state, how do I keep performance?

Move the computation into render and use useMemo only for expensive calculations to avoid unnecessary recomputation.

When is useEffect the only reasonable choice?

When you must interact with external systems, subscribe to outside sources, run mount-only analytics, or perform data fetching that needs lifecycle-aware cleanup.