# `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