react-doctor/jsx-max-depth

Extract deeply nested JSX into smaller components to keep render trees readable.

Validation prompt

Confirm the detector match and collect the required evidence before deciding whether an edit is warranted.

Fires on a leaf JSX element/fragment whose total nesting exceeds the configured max (default 14, far higher than OXC's strict 2): the count sums its JSX ancestor depth plus the depth of any JSX it pulls in through expression containers like {child} or {<subtree/>}, resolving identifiers through their variable bindings (cycles broken by name).

Suppress when: idiomatic deep composition: Provider stacks, design-system wrapper chains (a shadcn Card already nests several levels), and layout shells: can legitimately hit depth 10-13 without being unreadable, so depth alone is not a defect.

Evidence boundary

The diagnostic proves only that the detector’s modeled source pattern matched. It does not prove runtime impact, product intent, rendered failure, or that one remediation is correct.

Establish the environment, repository policy, exceptions, and required rendered or runtime evidence before deciding the occurrence.

Record one outcome:

• Confirmed failure: The required evidence establishes the violation.
• Rejected: A documented exception or false-positive predicate applies.
• Needs evidence: Named evidence can still be collected.
• Unavailable: Required evidence cannot be collected in this run.
• Waived with evidence: An authorized, scoped exception applies to an established failure.
• Observation: The review records an optional tradeoff without claiming a defect.

A waiver records its scope, authority, evidence, and review condition. It is not a pass or false positive.

Default severity is registry metadata. Use the occurrence’s JSON severity after repository configuration when ordering real findings.

Fix prompt

Apply this candidate correction only after the required evidence confirms the risk.

Pull the deepest subtree into its own named component so each render function stays shallow: e.g. lift the inner <Modal>…</Modal> body into <ModalBody> and render <ModalBody /> in place. Hoisting a nested JSX expression into a separate component (rather than just a local variable, which the rule still counts through its binding) flattens the measured depth and improves readability. If the nesting is intentional and unavoidable for your design system, raise the threshold via the react-doctor.jsxMaxDepth.max setting instead of restructuring. See https://oxc.rs/docs/guide/usage/linter/rules/react/jsx-max-depth

Repository-wide copy prompt

Use this repository-wide prompt only after validating each occurrence. For one occurrence, use the guidance above.