writing-react-effects

Original：🇺🇸 English

Translated

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.

2installs

Sourcedust-tt/dust

Added on2026-02-11

NPX Install

npx skill4agent add dust-tt/dust writing-react-effects

SKILL.md Content

View Translation Comparison →

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