# no-use-effect

Enforces a zero-useEffect policy across React and React Native components, redirecting logic to derived state, handlers, and dedicated libraries.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 729 installs · ★ 70
- Author: alejandrobailo
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/alejandrobailo/no-use-effect/tree/HEAD/SKILL.md
- Updated: 2026-03-26
- HTML: https://affpapa.org/en/nevibecode/skills/alejandrobailo-no-use-effect

## What it does

This skill acts as an always-on architectural guard for React and React Native codebases. It bans direct imports and invocations of `useEffect` in UI components. Instead of chaining effects to mirror state, it instructs the agent to compute values inline or wrap heavy calculations in `useMemo`. Data fetching shifts entirely to purpose-built querying libraries or React 19's `use()` hook with `<Suspense>`.

User actions and submission workflows belong strictly in event handlers, not in flag-flipping state cycles. When a component must reset its state on ID changes, the rule mandates React's native `key` prop remounting rather than dependency tricks. Direct effect calls remain permitted only inside encapsulated hooks like `useMountEffect` for third-party browser subscriptions. Bandaging broken effects with `useRef` guards is flagged as an anti-pattern.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add alejandrobailo/no-use-effect --skill no-use-effect -a claude-code
```
```bash
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/alejandrobailo-no-use-effect/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/alejandrobailo-no-use-effect/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install alejandrobailo/no-use-effect alejandrobailo-no-use-effect
```

2. **Manually: put the files in place**
- File: `.github/skills/alejandrobailo-no-use-effect/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/alejandrobailo/no-use-effect
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a opencode
```

### 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/alejandrobailo/no-use-effect/tree/HEAD/SKILL.md

## When to use it
- eliminate unnecessary render passes caused by prop synchronization
- prevent network race conditions in component-level data fetching
- move procedural submission flows into direct event listeners
- remove ref-based guard hacks used to stop effect loops

## Example prompts
- Refactor this product card to remove all useEffect calls
- Handle video player reset on ID change using keys instead of an effect
- Audit this React Native screen for state sync effects

## Similar
- [react-useeffect](https://affpapa.org/en/nevibecode/skills/react-useeffect.md) — skill · 127 installs
- [effect-v3-to-v4](https://affpapa.org/en/nevibecode/skills/effect-v3-to-v4.md) — skill · 704 installs
- [vercel-composition-patterns](https://affpapa.org/en/nevibecode/skills/vercel-composition-patterns.md) — skill · 418600 installs
- [effect-best-practices](https://affpapa.org/en/nevibecode/skills/effect-best-practices.md) — skill · 840 installs
- [21st-cli-use](https://affpapa.org/en/nevibecode/skills/21st-cli-use.md) — skill · 2000 installs
- [use-topbar](https://affpapa.org/en/nevibecode/skills/use-topbar.md) — skill · 1900 installs

## Other versions with the same name
- [no-use-effect · factory-ai](https://affpapa.org/en/nevibecode/skills/no-use-effect.md) — 1000 installs

---
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