React useEffect Best Practices (React 19)

useEffect is an escape hatch for synchronizing with external systems. Before writing a useEffect, verify it is actually needed.

You Do NOT Need useEffect For

1. Deriving State from Props or State

// BAD: redundant state + unnecessary Effect
const [fullName, setFullName] = useState('')
useEffect(() => {
  setFullName(firstName + ' ' + lastName)
}, [firstName, lastName])

// GOOD: calculate during rendering
const fullName = firstName + ' ' + lastName