react-doctor/prefer-dynamic-import

Use `const Component = dynamic(() => import('library'), { ssr: false })` from next/dynamic or React.lazy()

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

Validation prompt

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

Confirm a static ImportDeclaration whose source is one of the rule's tracked heavy libraries: @monaco-editor/react, monaco-editor, recharts, @react-pdf/renderer, react-quill, @codemirror/view, @codemirror/state, chart.js, react-chartjs-2, @toast-ui/editor, or draft-js. False positive: type-only imports (the rule does not currently skip importKind === "type") or critical above-the-fold UI that must SSR.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace the static import with next/dynamic — const Editor = dynamic(() => import("@monaco-editor/react"), { ssr: false }) — or React.lazy(() => import("recharts")) wrapped in a <Suspense> boundary. Disable SSR for browser-only libraries like Monaco and CodeMirror that touch window during evaluation. See https://nextjs.org/docs/app/guides/lazy-loading

Related rules

More Performance rules from the rules reference:

• react-doctor/prefer-stable-empty-fallback: Hoist a module-level const EMPTY = [] (or {}) and use it as the || / ?? fallback so the memoised child sees a stable reference
• react-doctor/redux-useselector-inline-derivation: Select the raw slice in useSelector and derive with useMemo, or hoist into a memoised createSelector from reselect.
• react-doctor/redux-useselector-returns-new-collection: useSelector that returns a fresh object/array literal re-renders on every action; return a primitive, split into multiple useSelector calls, or pass shallowEqual.
• react-doctor/rendering-animate-svg-wrapper: Wrap the SVG: `<motion.div animate={...}><svg>...</svg></motion.div>`
• 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