jsx/max-depth

Rule category

Style.

What it does

Enforces a maximum depth that JSX elements can be nested.

Examples

Failing

// max-depth: 3
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>;

Passing

// max-depth: 3
<App>
  <Foo>
    <Bar />
  </Foo>
</App>;

Rule Options

• max: The maximum depth that JSX elements can be nested. Defaults to 12.

{
  "@eslint-react/jsx/max-depth": ["warn", { "max": 12 }]
}