react-useeffect — Claude Code skill: when you don't need an Effect
A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary.
npx claude-code-templates@latest --skill development/react-useeffectWhat react-useeffect does
The skill kicks in while you write or review code with useEffect and useState: derived values, data fetching, state synchronization. It ships a quick-reference table of situation, what not to do, and what to do, plus a decision tree. A value computed from props, for instance, should be calculated during render rather than stored in state and updated by an Effect.
A separate section lists the cases where Effects do belong: syncing with external systems, subscriptions, analytics that fire because a component appeared, data fetching with proper cleanup. Resetting state on a prop change is handled with a key, expensive work with useMemo, external store subscriptions with useSyncExternalStore. Two companion files cover anti-patterns and alternatives in more depth.
The skill runs nothing and touches no files — it is reference material the agent leans on during generation and review. Worth having in a React codebase where Effects have already crept into calculations and event handling.
What it helps with
- drop a useEffect that recomputes a derived value
- switch state reset on prop change to a key
- add cleanup to an Effect that fetches data
- replace Effect-based caching with useMemo
- move a click response out of an Effect into the event handler
Example prompts for the agent
- check this component for useEffect anti-patterns
- do I even need a useEffect here?
- rewrite the form reset on id change with a key instead of useEffect
How to install react-useeffect
1claude-code-templates
npx claude-code-templates@latest --skill development/react-useeffect2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill react-useeffect -a claude-code3Manually: put the files in place
~/.claude/skills/react-useeffect/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-useeffect/
Manually: put the files in place
.agents/skills/react-useeffect/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/react-useeffect/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates react-useeffect2Manually: put the files in place
.github/skills/react-useeffect/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-useeffectManually: put the files in place
.devin/skills/react-useeffect/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-useeffect
How do I install react-useeffect in Claude?
Through the templates: npx claude-code-templates@latest --skill development/react-useeffect. The other route is npx skills add davila7/claude-code-templates --skill react-useeffect -a claude-code. The skill file lands at ~/.claude/skills/react-useeffect/SKILL.md.
What does react-useeffect do?
It collects the official React guidance on when an Effect is needed and when it is not. The agent consults it while writing or reviewing code that uses useEffect and useState.
How is this different from a general code review?
It does not hunt for bugs in general; it focuses on Effects — derived values, state resets, data fetching. The table of replacements and the decision tree cover those situations.
