use-effect

name

use-effect

description

Refactor React code away from direct useEffect usage. Use when Codex needs to review, rewrite, or prevent useEffect in React components, custom hooks, or frontend architecture; diagnose infinite loops or race conditions caused by effects; replace effect-driven state syncing with derived values, event handlers, query libraries, keyed remounts, or a mount-only wrapper such as useMountEffect; or enforce a no-direct-useEffect rule in linting and agent guidance.

Use Effect

Inspect the local React patterns before changing code. Prefer the project's existing data-fetching library, lifecycle wrapper, and lint setup over introducing new abstractions.

Treat direct useEffect as a code smell by default. Replace it with clearer control flow unless the code is genuinely synchronizing with an external system on mount or unmount.

Workflow

1. Locate every direct useEffect in the relevant scope and classify why it exists.
2. Decide whether the effect is:
   • deriving state from props or state
   • fetching data
   • relaying an action that should happen in response to a user event
   • synchronizing with an external system on mount
   • resetting local state when an identity changes
3. Replace the effect with the narrowest alternative pattern.
4. Preserve existing project conventions. If the codebase already has useMountEffect, use it instead of raw useEffect(..., []).
5. Verify behavior by running the relevant tests or targeted checks. Pay special attention to loops, duplicate requests, stale state, and remount semantics.

Replacement Rules

Derive State, Do Not Sync It

If an effect sets state from other props or state, compute the value during render instead.

Common smell:

useEffect( {
  (products.( p.));
}, [products]);