No useEffect

Never call useEffect directly unless the work is a true mount-only sync with an external system and no simpler pattern fits. Prefer a render-time computation, a query or mutation hook, an event handler, or a remount boundary instead.

Workflow

1. Classify why the effect exists.
2. Replace it with the narrowest pattern below.
3. Verify with the project's normal lint, typecheck, and tests.

Replacement Patterns

1. Derive state, do not sync it

Replace useEffect(() => setX(derive(y)), [y]) with inline computation or the project's existing memoization conventions.

const filteredProducts = products.filter((product) => product.inStock);

Smell test: state only mirrors props or other state.

2. Use query or mutation libraries for async work

Replace fetch-in-effect code with the app's data layer.

const productQuery = useQuery({
  queryKey: ["product", productId],
  queryFn: () => fetchProduct(productId),
});

Smell test: the effect fetches, awaits, retries, cancels, or writes async results into local state.

3. Use event handlers for user actions

Do the work where the action happens instead of setting a flag and reacting later.

const handleLike = () => {
  postLike();
};

Smell test: state exists only to trigger an effect, then gets reset.

4. Use useMountEffect for mount-only external sync

Use this only for work that is naturally "set up on mount, clean up on unmount": DOM integration, subscriptions, third-party widgets, and stable singleton bindings.

If the project already has a useMountEffect, use it. If not, add a small wrapper:

import { useEffect } from "react";

export function useMountEffect(effect: () => void | (() => void)) {
  useEffect(effect, []);
}

Prefer changing component structure so the component only mounts once preconditions are satisfied.

Smell test: the effect is a one-time setup or teardown for something outside React.

5. Use key to reset component state

If a component should behave like a fresh instance when an ID or entity changes, remount it from the parent.

return <VideoPlayer key={videoId} videoId={videoId} />;

Smell test: the effect exists only to reset local state when props change.

Review Standard

Treat new direct useEffect usage as a bug by default. Ask which of the five patterns applies. Accept direct useEffect only with explicit justification that the code is a mount-only external sync and that useMountEffect is the intended escape hatch.

Structure React Code This Way

Order component logic like this:

1. Hooks that read external state or data.
2. Local state.
3. Derived values computed during render.
4. Event handlers.
5. Early returns.
6. Render output.

Do not introduce mirrored state just to make an effect possible.