Validation of JSX maximum depth JS-0415
JSX tree is too deeply nested. Found 8 levels of nesting
132 }
133 };
134 return (
135 <>136 <div className={`container ${form ? "blur" : ""}`}>
137 <div className="content">
138 <div className="actions">JSX tree is too deeply nested. Found 5 levels of nesting
128 {DELETE ? (
129 <p>Are you sure you want to delete {product?.name}?</p>
130 ) : (
131 <form132 onSubmit={handleSubmit((data) => {133 submitHandler(data);134 })}135 >136 <div className="form-group">
137 <section>
138 <label htmlFor="name">Product Name: </label>JSX tree is too deeply nested. Found 5 levels of nesting
103 };
104
105 return (
106 <form107 className="page-form"108 onSubmit={handleSubmit((data) => {109 submitHandler(data);110 })}111 >112 <header>
113 <h1>Edit Product : </h1>
114 <p className="title">{product?.name}</p>JSX tree is too deeply nested. Found 6 levels of nesting
105 return "";
106 };
107 return (
108 <>109 <div className="home">
110 <div className="home-container">
111 <div className="home-header">JSX tree is too deeply nested. Found 6 levels of nesting
118 }, 0);
119
120 return (
121 <div className="checkout">122 <header className="checkout__header">
123 <div className="cart-filter">
124 {carts.map((cart, index) => {
Description
Nesting JSX elements too deeply can confuse developers reading the code. To make maintenance and refactoring easier, DeepSource recommends limiting the maximum JSX tree depth to 4.
Code that looks like this is nearly unreadable for someone unfamiliar:
function App() {
return <Foo>
<Bar>
<Baz>
<div id="deep-div">
Too deeply nested!
</div>
</Baz>
</Bar>
</Foo>
}
Bad Practice
function FormContainer() {
// This JSX tree is too deep
return <FormWrapper>
<Form>
<FormEntry>
<Label>
<strong>Name</strong>
</Label>
<FormInput type="text" / >
</FormEntry>
</Form>
</FormWrapper>
}
Recommended
function FormContainer() {
// the FormEntry component has been modified to accept the labelName and inputType.
// It now returns JSX that contains a label and a field.
return <FormWrapper>
<Form>
<FormEntry labelName="Name" inputType="text">
</FormEntry>
</Form>
</FormWrapper>
}