{"record":{"id":"7508326fd37872c6","repo":"oxc-project/oxc","slug":"jsx-nesting-depth-of-depth-exceeds-the-configure","errorCode":null,"errorMessage":"JSX nesting depth of {depth} exceeds the configured maximum of {max}","messagePattern":"JSX nesting depth of (.+?) exceeds the configured maximum of (.+?)","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_max_depth.rs","lineNumber":21,"sourceCode":"\nuse oxc_ast::{\n    AstKind,\n    ast::{Expression, JSXChild},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_semantic::SymbolId;\nuse oxc_span::{GetSpan, Span};\nuse rustc_hash::FxHashSet;\n\nuse crate::{\n    AstNode,\n    context::{ContextHost, LintContext},\n    rule::{DefaultRuleConfig, Rule},\n};\n\nfn jsx_max_depth_diagnostic(depth: u32, max: u32, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\n        \"JSX nesting depth of {depth} exceeds the configured maximum of {max}\"\n    ))\n    .with_label(span)\n}\n\n#[derive(Debug, Clone, Default, Serialize, Deserialize)]\npub struct JsxMaxDepth(Box<JsxMaxDepthConfig>);\n\nimpl std::ops::Deref for JsxMaxDepth {\n    type Target = JsxMaxDepthConfig;\n\n    fn deref(&self) -> &Self::Target {\n        &self.0\n    }\n}\n\n#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]","sourceCodeStart":3,"sourceCodeEnd":39,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_max_depth.rs#L3-L39","documentation":"Diagnostic from react/jsx-max-depth (category: style). It reports when the JSX nesting depth of an element exceeds the configured maximum: the rule walks from each leaf JSX element/fragment, counting ancestor depth plus child depth, and even resolves through function components (it tracks visited SymbolIds so a component rendered as <Foo/> contributes the JSX depth of Foo's own tree). This implementation defaults max to 2 (see impl Default for JsxMaxDepthConfig), stricter than eslint-plugin-react's default of 4.","triggerScenarios":"Running oxlint with react/jsx-max-depth enabled on JSX nested deeper than max (default 2): three or more levels of nested elements/fragments such as <div><div><div><span/></div></div></div> (depth 4 > 2). Depth counts elements and fragments and crosses component boundaries, so <Layout><Page><Card/></Page></Layout> adds the internal trees of Layout and Page too.","commonSituations":"Adopting oxlint with the rule's default max: 2 and hitting it immediately on previously-clean deep markup; migrating from eslint-plugin-react where max defaulted to 4; layout-heavy pages (page > section > card > row > cell) that were never decomposed.","solutions":["Extract deeply nested inner JSX into child components to flatten the tree","Raise the limit in .oxlintrc.json if the team agrees on a larger budget: { \"rules\": { \"react/jsx-max-depth\": [\"warn\", { \"max\": 4 }] } }","Replace wrapper divs that exist only for layout with CSS (flex/grid gap, container queries) to remove DOM levels","Disable the rule for a file with an oxlint-disable comment while a large component is being refactored"],"exampleFix":"// before (max: 2, depth 4)\nconst Component = () => (\n  <div><div><div><span /></div></div></div>\n);\n\n// after (depth 2)\nconst Inner = () => <div><span /></div>;\nconst Component = () => <div><Inner /></div>;","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-max-depth src/  # then review the deepest offenders","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Decompose deep JSX into child components as you build, not after the depth alarm fires","Set an explicit max in .oxlintrc.json that matches the team's budget (this implementation defaults to 2, stricter than the ESLint plugin's 4)","Remember depth crosses component boundaries — the rule counts nested function-component trees too"],"tags":["react","jsx","nesting-depth","refactoring","style","oxlint","lint"],"backgroundTag":"jsx-max-nesting-depth","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}