react-effect-decision

React effect decision

Default rule for this project: do not reach for direct useEffect first.

Most effect usage in React code is a sign that the component is syncing state that should be derived during render, routing an event through state, or resetting local state in a way React already models better.

This skill merges:

• React's official decision tree from "You Might Not Need an Effect"
• The project's stricter no direct useEffect preference

Start here

Before writing any effect, ask these in order:

1. Can I calculate this from props or state during render
2. Is this triggered by a user action and better placed in the event handler
3. Am I trying to reset component state when identity changed and should use key
4. Is this an expensive pure calculation that should use useMemo
5. Is this an external subscription that should use useSyncExternalStore or a focused custom hook
6. Is this real external synchronization that must happen on mount or on dependency changes

If you answer yes to any of 1 through 5, do not write a direct useEffect.

Project stance

React allows effects for real external synchronization. This project is stricter:

• Avoid direct useEffect in components whenever a clearer pattern exists
• Prefer derived values, event handlers, key remounts, memoization, query libraries, Convex hooks, and focused custom hooks
• If mount only external setup is truly needed, use an explicit useMountEffect wrapper instead of sprinkling raw useEffect through feature code

Example wrapper:

import { useEffect } from "react";

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

Use that only for one time external setup like DOM focus, third party widgets, or browser API listeners that belong to the component lifecycle.

Decision guide

1. Derived state belongs in render

Bad smell:

• useEffect(() => setX(deriveFromY(y)), [y])
• State that only mirrors props or other state