AbsoluteJS

absolute/max-jsxnesting

Warn when JSX elements are nested too deeply, suggesting refactoring into a separate component.

React & JSXSuggestion
View on GitHub

#Rule Details

Caps how deeply JSX elements may nest before the markup should be broken into smaller components. The element itself is level 1, and every ancestor JSXElement or JSXFragment adds a level — fragments count too, since they still represent a layer of structure.

Each element that is too deep is reported individually, so a long chain produces several reports that all point at the layers worth extracting. Note the configured rule name has no hyphen: absolute/max-jsxnesting.

#Examples

Incorrect
TSX
// options: [2] — <span> sits at level 3
const Panel = () => (
	<div>
		<section>
			<span />
		</section>
	</div>
);

Fragments count as a level

TSX
// options: [2] — the fragment counts as a level, so <span> is level 3
const Panel = () => (
	<>
		<div>
			<span />
		</div>
	</>
);
Correct
TSX
// options: [2]
const Row = () => (
	<div>
		<span>Hello</span>
	</div>
);

Refactor depth into components

TSX
// Deep markup extracted into its own component
const ProfileCard = () => (
	<Card>
		<ProfileHeader />
	</Card>
);

#Options

This rule accepts the following options:

OptionTypeDefaultDescription
(positional number)number1Maximum JSX nesting level allowed (minimum 1). The element itself is level 1; each ancestor element or fragment adds one.
JS
{
	rules: {
		// Allow up to 3 levels of JSX nesting
		'absolute/max-jsxnesting': ['warn', 3]
	}
}

#When Not To Use It

Layout-heavy pages sometimes need several real wrapper layers (grids inside cards inside sections). If extracting them adds indirection without value, raise the limit rather than fighting the rule on every page.

#Resources