AbsoluteJS

absolute/no-unnecessary-div

Flag unnecessary <div> wrappers that enclose a single JSX element.

React & JSXSuggestion
View on GitHub

#Rule Details

Flags a <div> whose only meaningful child is a single JSX element — a wrapper that adds a DOM node without adding structure or meaning. Either drop the wrapper, or replace it with a semantic element (<section>, <header>, <nav>, ...) that reflects its purpose.

Whitespace-only text is ignored when counting children, and attributes on the div (like className) do not exempt it. Divs with zero or multiple meaningful children, text content, an expression-container child ({value}), or a fragment child are not flagged.

#Examples

Incorrect
TSX
const Wrapper = () => (
	<div>
		<Avatar />
	</div>
);

const Styled = () => (
	<div className="wrapper">
		<Avatar />
	</div>
); // attributes do not make the wrapper necessary
Correct
TSX
const Row = () => (
	<div>
		<Avatar />
		<Name />
	</div>
); // multiple children — the div is doing real work
TSX
const Banner = () => <section><Logo /></section>; // semantic wrapper
const Label = () => <span />;                       // not a div

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/no-unnecessary-div': 'error'
	}
}

#When Not To Use It

Some layout techniques (fl/grid containers, scroll wrappers, libraries that require a host node) need a wrapper element even around a single child. Replace those with a semantic element, or disable the rule where a bare wrapper is genuinely required.

#Resources