react/jsx-max-depth

Enforce a maximum depth of nested JSX elements

Deeply nested JSX is hard to follow, and it usually means part of the tree should be its own component. The outermost element has depth 0, its children have depth 1, and so on. By default the rule reports an element deeper than 2.

Elements inside an expression in braces, such as {more && <li />} or a .map() callback, start again at depth 0.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/jsx-max-depth" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/jsx-max-depth" = ["error", {
  max = 2,
}]

Examples#

example.jsx1 problem
const page = (
  <main>
    <section>
      <ul>
        <li>First</li>
      </ul>
    </section>
  </main>
);
example.jsxNo problems
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);
example.jsxNo problems
const page = (
  <main>
    <section>
      <ul>
        {items.map(item => <li key={item.id}>{item.title}</li>)}
        {more && <li>More</li>}
      </ul>
    </section>
  </main>
);

Options#

OptionDefaultWhat it does
max2The deepest level that's allowed.
example.jsxwith { "max": 1 }1 problem
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);

Moving part of the tree to a variable doesn't change its depth:

example.jsxwith { "max": 1 }1 problem
const section = (
  <section>
    <ItemList />
  </section>
);

const page = <main>{section}</main>;