AbsoluteJS

absolute/no-nested-jsx-return

Disallow nested functions that return non-component, non-singular JSX, to enforce one component per file.

React & JSXProblem
View on GitHub

#Rule Details

Enforces one component per file by flagging nested functions that return complex JSX. A render path that produces real markup deserves to be its own named component — it is easier to test, memoize, and reuse than a closure buried inside another component.

A nested function is allowed when it returns a single component element (uppercase tag, including Ns.Component) or a "singular" element (zero or one non-whitespace child, where a single child element has no meaningful children of its own). Anything richer — multiple children, or a multi-child fragment — is reported. The top-level component function itself is always exempt.

#Examples

Incorrect
TSX
function App() {
	const renderHeader = () => (
		<div>
			<span>A</span>
			<span>B</span>
		</div>
	); // nested arrow returning multi-child JSX
	return <div />;
}
TSX
function App() {
	function renderHeader() {
		return (
			<>
				<span>A</span>
				<span>B</span>
			</>
		); // nested function returning a multi-child fragment
	}
	return <div />;
}
Correct
TSX
function App() {
	return (
		<div>
			<span>Hello</span>
		</div>
	); // top-level component is exempt
}

Components and singular elements are allowed

TSX
function App() {
	const renderIcon = () => <Icon />;   // single component element
	const renderBox = () => <div />;     // singular empty element
	return <Toolbar />;
}

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/no-nested-jsx-return': 'error'
	}
}

#When Not To Use It

Render-prop and "render helper" patterns rely on inline functions that return markup. If those patterns are central to your codebase, this rule will be noisy — disable it or limit it to specific directories.

#Resources