React Useeffect

This is basically the React docs distilled into a decision tree for when you actually need useEffect versus when you're reaching for it out of habit. It covers the common antipatterns like using Effects for derived state or event handling, then shows you what to use instead: direct calculations, useMemo for expensive ops, key prop for resets, and plain event handlers. The quick reference table is especially useful during code review when you spot someone setting state in an Effect that should just be computed during render. Honestly, most useEffect bugs come from using it when you don't need an external system at all.

skills.sh installs: 454
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --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