Refactor React Effects

Refactor React Effects

Do not add useEffect by default. Use it only to synchronize a component with a concrete system outside React. If there is no external system, remove the effect.

Before adding or retaining an effect, answer all of these questions:

1. Which external system is being synchronized?
2. What starts or updates the synchronization?
3. What cleanup, if any, prevents leaks or duplicate subscriptions?
4. Why can an event handler, query API, render derivation, conditional mount, or existing integration hook not own the behavior?

If the first question has no concrete answer, do not use an effect.

Required Context

• Read web/AGENTS.md and the nearest package guidance before changing web code.
• For large features, local Zustand stores, tables, or controller components, also read ../frontend-large-feature-architecture/SKILL.md.
• Read references/refactoring-patterns.md before implementing a refactor.

Decision Rules

Apply these rules in order:

1. Derive during render. Compute values from current props, query data, and client state instead of storing a synchronized copy.
2. Gate on required data. If a form or UI cannot initialize correctly without query data, let a parent own loading/error handling. Mount a child only after the data exists and pass guaranteed initial values to its lazy useState initializer.
3. Make reset semantics explicit. Use a key to remount for a new entity only when discarding the old local draft is intended. Use an explicit user action for refresh/reset when drafts must not be overwritten silently.