React: avoid unnecessary useEffect

Use when deciding whether to add or keep a useEffect, refactoring data flow, or reviewing PRs where effects mirror props, chain state updates, or duplicate fetching. This skill is aligned with the mental model in React’s guide You Might Not Need an Effect—prefer that doc for canonical examples; use this file as a checklist in this codebase.

What useEffect is for

• Synchronization with external systems: browser APIs (subscriptions, matchMedia, non-React widgets), network listeners, timers that truly live outside React’s render model.
• Cleanup of those subscriptions when dependencies change or the component unmounts.

If the logic only involves props, state, and JSX, you usually do not need an effect.

Prefer these instead of an effect

• Derive during render
  If something can be computed from props/state, compute it in the render body (or a small pure function). Don’t copy it into state and “sync” with useEffect.

• Handle user intent in events
  Validation, toasts, analytics, navigation, and “when the user clicks/submits” belong in event handlers, not in effects that watch the same values.