react-useeffect

softaworks/agent-toolkit

React useEffect best practices: know when to use Effects and when to use better alternatives.

What is react-useeffect?

Reference guide for React useEffect patterns from official docs. Use when writing or reviewing useEffect hooks, managing derived state, data fetching, or state synchronization. Teaches when NOT to use Effect and recommends alternatives like useMemo, event handlers, and the key prop.

Clarifies when Effects are appropriate (external system sync, subscriptions, analytics, data fetching)
Identifies anti-patterns: derived state, expensive calculations, event responses, and state chaining in Effects
Provides decision tree to choose between event handlers, Effects, render-time calculations, and key prop
Recommends alternatives: useMemo for expensive calculations, event handlers for user interactions, key prop for state reset
Explains proper cleanup patterns for data fetching and subscriptions

How to install react-useeffect

npx skills add https://github.com/softaworks/agent-toolkit --skill react-useeffect

Claude Code

Cursor

Windsurf

Cline

How to use react-useeffect

1.Review the Quick Reference table to map your use case to the recommended pattern
2.Follow the Decision Tree to determine if you need an Effect or a better alternative
3.Check the anti-patterns guide for common mistakes and their fixes
4.Consult the alternatives guide for useMemo, key prop, lifting state, or useSyncExternalStore examples
5.Apply the recommended pattern to your component code

Use cases

Good for

Reviewing a component that uses useEffect to derive state and refactoring to calculate during render instead
Deciding whether to fetch data in useEffect or use a framework's built-in data fetching mechanism
Replacing useEffect state watchers with direct event handlers for user interactions
Optimizing expensive calculations by switching from useEffect caching to useMemo
Resetting component state on prop changes using the key prop instead of useEffect

Who it's for

React developers writing or reviewing hooks-based components
Teams establishing useEffect best practices and code review standards
Developers migrating from class components or learning modern React patterns
Engineers optimizing performance by eliminating unnecessary Effects

react-useeffect FAQ

When should I use useEffect?

Use useEffect only for synchronizing with external systems (non-React widgets, browser APIs), subscriptions to external stores, analytics/logging, or data fetching with proper cleanup. For everything else, there's usually a better alternative.

How do I handle derived state without useEffect?

Calculate derived values directly during render at the top level of your component. React will automatically re-run the calculation when props or state change. If the calculation is expensive, wrap it with useMemo.

What should I use instead of useEffect for user events?

Use event handlers directly. You know exactly what triggered the event, so you can respond immediately without watching state changes in an Effect.

How do I reset state when a prop changes?

Use the key prop on your component instead of useEffect. When the key changes, React unmounts and remounts the component, resetting all state automatically.

What's the difference between useEffect and useSyncExternalStore?

useEffect is a general escape hatch for external systems. useSyncExternalStore is specifically designed for subscribing to external stores and is preferred when available, as it handles edge cases better.

Full instructions (SKILL.md)

Source of truth, from softaworks/agent-toolkit.

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

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