# react-useeffect

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.

- skill · `type=skill` · Claude Code · 127 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-useeffect
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/react-useeffect

## What it 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.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/react-useeffect
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill react-useeffect -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/react-useeffect/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-useeffect/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/react-useeffect/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/react-useeffect/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates react-useeffect
```

2. **Manually: put the files in place**
- File: `.github/skills/react-useeffect/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-useeffect
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-useeffect/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-useeffect

## When to use it
- 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
- 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

## Similar
- [react-server-components](https://affpapa.org/en/nevibecode/skills/react-server-components.md) — skill · 954 installs
- [react-patterns](https://affpapa.org/en/nevibecode/skills/manutej-react-patterns.md) — skill · 471 installs
- [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · 1100 installs
- [no-use-effect](https://affpapa.org/en/nevibecode/skills/no-use-effect.md) — skill · 1000 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/bbeierle12-gsap-react.md) — skill · 724 installs
- [react-component-architecture](https://affpapa.org/en/nevibecode/skills/react-component-architecture.md) — skill · 674 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 205 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md