react-doctor/rerender-memo-before-early-return

Extract the JSX into a memoized child component so the parent's early return short-circuits before the child renders

• Category: Performance
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm a const x = useMemo(() => <jsx/>, [...]) declaration inside a PascalCase component, followed by any if (...) return ...; early-return statement later in the same block. The memo callback executes every render before the bailout — useMemo caches the result, not the JSX construction work.

Fix prompt

Use this once validation confirms the diagnostic is real.

Extract the JSX into a memo-wrapped child component at module scope, then render <Child ... /> AFTER the early returns. The parent short-circuits before React reconciles the child, and the child still benefits from prop-equality memoization on the slow path. See https://react.dev/reference/react/memo

Related rules

More Performance rules from the rules reference:

• react-doctor/rerender-memo-with-default-value: Move to module scope: `const EMPTY_ITEMS: Item[] = []` then use as the default value
• react-doctor/rerender-state-only-in-handlers: Replace useState with useRef when the value is only mutated and never read in render — `ref.current = ...` updates without re-rendering the component
• react-doctor/rerender-transitions-scroll: Wrap the setState in startTransition (mark as non-urgent), use useDeferredValue, or stash in a ref + rAF throttle so scroll/pointer events don't trigger a re-render per fire
• react-doctor/tanstack-start-loader-parallel-fetch: Use `const [a, b] = await Promise.all([fetchA(), fetchB()])` to avoid request waterfalls in route loaders
• react-doctor/advanced-event-handler-refs: Store the handler in a ref and have the listener read `handlerRef.current()` — the subscription stays put while the latest handler is always called