react-doctor/rendering-hoist-jsx

Move the static JSX to module scope: `const ICON = <svg>...</svg>` outside the component so it isn't recreated each render

• 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 = <jsx>...</jsx> (element or fragment) declared inside a PascalCase component body, where the JSX contains NO {expression} interpolations and NO {...spread} attributes — meaning it references no prop, state, or local binding. React creates a new element object on every render.

Fix prompt

Use this once validation confirms the diagnostic is real.

Move the declaration outside the component to module scope: const ICON = <svg>...</svg>. The element is created once at module load and reused across every render. If you later need props, lift it into its own component instead of inlining state. See https://react.dev/learn/keeping-components-pure

Related rules

More Performance rules from the rules reference:

• react-doctor/rendering-hydration-no-flicker: Use `useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)` or add `suppressHydrationWarning` to the element
• react-doctor/rendering-script-defer-async: Add `defer` for DOM-dependent scripts or `async` for independent ones (analytics). In Next.js, use `<Script strategy="afterInteractive" />` instead
• react-doctor/rendering-svg-precision: Truncate path/points/transform decimals to 1–2 digits — sub-pixel precision adds bytes with no visible difference
• react-doctor/rendering-usetransition-loading: Replace with `const [isPending, startTransition] = useTransition()` — avoids a re-render for the loading state
• react-doctor/rerender-defer-reads-hook: Read the URL state inside the handler (e.g. `new URL(window.location.href).searchParams`) so the component doesn't subscribe and re-render on every URL change