> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# jsx-max-depth

[Added in v0.5.3](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.3)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-max-depth': 'error',
    },
  },
]);
```

Enforce JSX maximum depth.

## Rule Details

This rule validates a specific depth for JSX elements.

Examples of **incorrect** code for this rule:

```jsx
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>
```

## Rule Options

It takes one option object with a positive `max` integer (default: `2`).

```json
{ "react/jsx-max-depth": ["error", { "max": 2 }] }
```

Examples of **incorrect** code for this rule with `{ "max": 1 }`:

```json
{ "react/jsx-max-depth": ["error", { "max": 1 }] }
```

```jsx
<App>
  <Foo>
    <Bar />
  </Foo>
</App>
```

```json
{ "react/jsx-max-depth": ["error", { "max": 1 }] }
```

```jsx
const foobar = (
  <Foo>
    <Bar />
  </Foo>
);
<App>{foobar}</App>;
```

Examples of **incorrect** code for this rule with `{ "max": 2 }`:

```json
{ "react/jsx-max-depth": ["error", { "max": 2 }] }
```

```jsx
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>
```

Examples of **correct** code for this rule with `{ "max": 1 }`:

```json
{ "react/jsx-max-depth": ["error", { "max": 1 }] }
```

```jsx
<App>
  <Hello />
</App>
```

Examples of **correct** code for this rule with `{ "max": 2 }`:

```json
{ "react/jsx-max-depth": ["error", { "max": 2 }] }
```

```jsx
<App>
  <Foo>
    <Bar />
  </Foo>
</App>
```

Examples of **correct** code for this rule with `{ "max": 3 }`:

```json
{ "react/jsx-max-depth": ["error", { "max": 3 }] }
```

```jsx
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>
```

## When Not To Use It

If you are not using JSX then you can disable this rule.

## Original Documentation

- [eslint-plugin-react: jsx-max-depth](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/jsx-max-depth.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/jsx-max-depth.js)