# Avoid Unnecessary Useeffect

> Prevent unnecessary React useEffect usage when writing, reviewing, or refactoring React components. Apply when effects derive state, respond to user actions, transform render data, duplicate props, synchronize React state, or manually fetch server data; keep effects for synchronization with systems outside React.

- Skill: `megara-arevaco/avoid-unnecessary-useeffect` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add megara-arevaco/avoid-unnecessary-useeffect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/megara-arevaco/avoid-unnecessary-useeffect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: megara-arevaco (https://skillmd.com/u/megara-arevaco)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/megara-arevaco/avoid-unnecessary-useeffect

---


# Avoid Unnecessary `useEffect`

Treat effects as an escape hatch for synchronizing React with an external system. Before adding or preserving an effect, prefer logic during rendering or in the event handler that caused the change.

## Decide Where Logic Belongs

- Calculate values derived from props or state during render. Do not store derived values in state merely to update them from an effect.
- Handle clicks, submissions, selections, dragging, and typing in their corresponding event handlers.
- Use props directly unless the component intentionally needs an independent editable snapshot.
- Keep one source of truth. Store the minimum state and derive related values.
- Filter, sort, map, and otherwise transform data during render. Use `useMemo` only when the computation is meaningfully expensive or referential stability is required.
- Prefer framework-native loaders, Server Components, router loaders, TanStack Query, RTK Query, or the project's established server-state solution over manually recreating caching, retries, deduplication, and refetching in an effect. Keep a manual fetch effect only when it is genuinely the appropriate abstraction.

Use `useEffect` when the component must synchronize with something outside React, including browser or imperative DOM APIs, WebSockets, timers, subscriptions, analytics, external event listeners, and third-party imperative libraries. Include cleanup when that synchronization creates a subscription, listener, timer, or resource.

## Review Heuristic

When encountering this shape:

```tsx
useEffect(() => {
  setSomething(computeValue(inputs));
}, [inputs]);
```

Check whether it can become:

```tsx
const something = computeValue(inputs);
```

Do not apply this rewrite mechanically when the effect truly synchronizes an external system or when state intentionally represents an independently editable snapshot.

## Mental Model

Prefer:

```text
React props/state -> synchronize -> external system
```

Avoid:

```text
React state A -> effect -> React state B
```

Before using an effect, ask:

1. Is this needed for rendering? Calculate it during render.
2. Was it caused by a user action? Put it in the event handler.
3. Can it be derived from props or existing state? Derive it.
4. Does it synchronize two React state values? Use one source of truth.
5. Is it a data transformation? Perform it during render, optionally memoizing when justified.
6. Is it server data? Use the project's server-state or framework abstraction when available.
7. Does it connect React to an external system? An effect is likely appropriate.