react/jsx-max-depth

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#

Reported:

const page = (
  <main>
    <section>
      <ul>
        <li>First</li>
      </ul>
    </section>
  </main>
);

Not reported:

const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);

const page = (
  <main>
    <section>
      <ul>
        {items.map(item => <li key={item.id}>{item.title}</li>)}
        {more && <li>More</li>}
      </ul>
    </section>
  </main>
);

Options#

Option	Default	What it does
`max`	`2`	The deepest level that's allowed.

const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);

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

const section = (
  <section>
    <ItemList />
  </section>
);

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