home / skills / dust-tt / dust / dust-writing-react-effects

dust-writing-react-effects skill

safe

/.claude/skills/dust-writing-react-effects

This skill guides writing React components to avoid unnecessary useEffect by deriving state during render and avoiding effect-driven updates.

npx playbooks add skill dust-tt/dust --skill dust-writing-react-effects

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.5 KB

---
name: writing-react-effects
description: Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
---

# Writing React Effects Skill

Guides writing React components that avoid unnecessary `useEffect` calls.

## Core Principle

> Effects are an escape hatch for synchronizing with **external systems** (network, DOM, third-party widgets). If there's no external system, you don't need an Effect.

## Calculate Derived State During Rendering

If a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects solely in response to prop changes; prefer derived values or keyed resets instead.

**Incorrect (redundant state and effect):**

```tsx
function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const [fullName, setFullName] = useState('')

  useEffect(() => {
    setFullName(firstName + ' ' + lastName)
  }, [firstName, lastName])

  return <p>{fullName}</p>
}
```

**Correct (derive during render):**

```tsx
function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const fullName = firstName + ' ' + lastName

  return <p>{fullName}</p>
}
```

References: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

Overview

This skill helps you write and review React components that avoid unnecessary useEffect hooks. It emphasizes deriving values during render and reserving effects for true side effects that interact with external systems. The goal is fewer renders, less state drift, and clearer component logic.

How this skill works

The skill inspects component code to find patterns where state is set inside useEffect only to mirror props or other state. It flags redundant state and suggests deriving values directly in render or using keyed resets when appropriate. It also highlights true side effects (network, DOM, subscriptions) so you keep useEffect when it is actually needed.

When to use it

When creating new React components to avoid introducing unnecessary effects.
During code reviews to catch redundant useEffect patterns and state duplication.
When refactoring components that have complex useEffect logic or many dependencies.
When state updates only mirror props or other state instead of representing external effects.
When you want to reduce re-renders and prevent state drift between derived values.

Best practices

Compute derived values during render rather than storing them in state.
Reserve useEffect for interactions with external systems: network, DOM, timers, subscriptions.
Avoid setting state inside an effect solely in response to props; prefer derived values or a key-based reset.
Keep effects focused and minimal: each effect should have a clear external cause and cleanup when needed.
Audit effect dependency arrays and prefer stable callbacks or memoization to prevent unnecessary runs.

Example use cases

Replace state+effect that concatenates strings (firstName + lastName) with a render-time derived value.
Refactor a component that sets derived filters in effect whenever props change, to compute filters on render.
Review a codebase to remove effects that only transform data and convert them into pure render logic.
Simplify form components that previously synced input values into separate derived state via effects.

FAQ

How do I tell if an effect is necessary?

Ask whether the effect interacts with an external system (network, DOM, timers, subscriptions). If it only transforms props/state, compute the result during render instead.

What if deriving during render is expensive?

Use memoization (useMemo) for expensive calculations, but only when cost justifies it. Prefer keeping logic pure and avoid state duplication unless performance profiling shows a problem.