Validation of JSX maximum depth JS-0415
Expected the depth of nested jsx elements to be <= 2, but found 6
113 <label htmlFor="Standard">Standard</label>
114 <input type="radio" name="todopriorityedit" value="High" id="High" onChange={handleInputChange}
115 checked={priority === "High"}/>
116 <label htmlFor="High">High</label></div>117 </div>
118 </form>
119 </div>Expected the depth of nested jsx elements to be <= 2, but found 6
111 <input type="radio" name="todopriorityedit" value="Standard" id="Standard" onChange={handleInputChange}
112 checked={priority === "Standard"}/>
113 <label htmlFor="Standard">Standard</label>
114 <input type="radio" name="todopriorityedit" value="High" id="High" onChange={handleInputChange}115 checked={priority === "High"}/>116 <label htmlFor="High">High</label></div>
117 </div>
118 </form>Expected the depth of nested jsx elements to be <= 2, but found 6
110 <label htmlFor="Low">Low</label>
111 <input type="radio" name="todopriorityedit" value="Standard" id="Standard" onChange={handleInputChange}
112 checked={priority === "Standard"}/>
113 <label htmlFor="Standard">Standard</label>114 <input type="radio" name="todopriorityedit" value="High" id="High" onChange={handleInputChange}
115 checked={priority === "High"}/>
116 <label htmlFor="High">High</label></div>Expected the depth of nested jsx elements to be <= 2, but found 5
94 </div>
95 <div className="duringedit">
96 <form className="todocontent" id="editform" onSubmit={handleSubmit}>
97 <div className="inputdiv"><label htmlFor="todotitleedit">Title:</label> 98 <input type="text" name="todotitleedit" id="todotitleedit" required value={heading} onChange={handleInputChange}/>
99 </div>
100 <div className="inputdiv"><label htmlFor="todocontentedit">Content (optional):</label>Expected the depth of nested jsx elements to be <= 2, but found 5
95 <div className="duringedit">
96 <form className="todocontent" id="editform" onSubmit={handleSubmit}>
97 <div className="inputdiv"><label htmlFor="todotitleedit">Title:</label>
98 <input type="text" name="todotitleedit" id="todotitleedit" required value={heading} onChange={handleInputChange}/> 99 </div>
100 <div className="inputdiv"><label htmlFor="todocontentedit">Content (optional):</label>
101 <input type="text" name="todocontentedit" id="todocontentedit" value={text} onChange={handleInputChange}/>
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>
}