JSX Nesting Depth

React Metric  |  AST-based

Maximum nesting depth of JSX elements inside a component. Deep JSX trees are hard to read, maintain, and test.

Formula

Counting rules:

• Each jsx_element or jsx_fragment node increments the depth by 1.
• jsx_self_closing_element is a leaf — depth 0 on its own, contributes to parent depth.
• Depth starts at 1 for the outermost JSX container.

TypeScript / TSX Example

function Card() {
  return (              // depth 1
    <div>               // depth 1
      <header>          // depth 2
        <h1>            // depth 3
          <span />      // self-closing leaf (depth 3 inherited)
        </h1>
      </header>
    </div>
  );
}
// jsx_nesting = 3

Thresholds

JSX nesting is informational — no configurable thresholds. Values above 5–6 are generally a sign that the component should be split.

Related metrics

Used Components (NUC) · Cyclomatic Complexity · Maintainability Index