React Useeffect

A practical reference that cuts through the noise about when Effects are actually necessary versus when you're reaching for the wrong tool. It's structured around a clear decision tree: user interactions belong in event handlers, derived values should be calculated during render, and Effects are for synchronizing with external systems. The quick reference table alone will save you from common mistakes like using Effects for transformations or event responses. What makes this genuinely useful is that it teaches you to identify the anti-patterns before you write them, which is more valuable than just knowing the API. Keep it handy during code reviews.

skills.sh installs: 4.1K
GitHub stars: 2.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add softaworks/agent-toolkit --skill react-useeffect --agent claude-code

Installs into .claude/skills of the current project.

Files

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