react-doctor/no-giant-component

Extract logical sections into focused components: `<UserHeader />`, `<UserActions />`, etc.

• Category: Architecture
• 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.

Fires on any uppercase-named function declaration or arrow-assigned component whose body spans more than 300 source lines (start to end line of the function body). The line-count threshold is a heuristic — a long but cohesive JSX-heavy component can still be readable, while a shorter component with tangled responsibilities can be a worse offender. Use judgment beyond the raw count.

Fix prompt

Use this once validation confirms the diagnostic is real.

Identify the distinct logical sections (header, list, footer, side panel, action bar) and extract each into a focused subcomponent like <UserHeader /> or <UserActions />. Lift shared data fetching and effects into custom hooks. Resist premature splits that obscure data flow; aim for each extracted piece to have a single responsibility. See https://react.dev/learn/thinking-in-react

Related rules

More Architecture rules from the rules reference:

• react-doctor/no-gradient-text: Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients
• react-doctor/no-inline-exhaustive-style: Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render
• react-doctor/no-many-boolean-props: Split into compound components or named variants: `<Button.Primary />`, `<DialogConfirm />` instead of stacking `isPrimary`, `isConfirm` flags
• react-doctor/no-multi-comp: Move secondary components into their own files.
• react-doctor/no-polymorphic-children: Expose explicit subcomponents (`<Button.Text>`, `<Button.Icon>`) so consumers don't need to switch on `typeof children`