react/no-derived-state-effect

Why

useEffect(() => setFullName(first + ' ' + last), [first, last]) renders once with a stale value, then again with the right one: an extra render, a flash of wrong content and a second source of truth that drifts.

Fix

Compute it in the component body: const fullName = first + ' ' + last. If the computation is expensive, wrap it in useMemo (or let React Compiler memoize it). Reset state on a prop change with a key, and handle user events in the event handler, not in an effect.

Examples

// bad
const [visible, setVisible] = useState([])
useEffect(() => setVisible(todos.filter((t) => !t.done)), [todos])
// good
const visible = todos.filter((t) => !t.done)

Sources

• React docs, You Might Not Need an Effect

Read it in the terminal

npx github:dawidolko/frontend-skills explain react/no-derived-state-effect