Expected the depth of nested jsx elements to be <= 2, but found 3
40 </div>
41
42 <div className="explaination">
43 <p>{data.explanation}</p>44 </div>
45 </div>
46 </>Expected the depth of nested jsx elements to be <= 2, but found 3
19 <>
20 <div>
21 <div className="picture">
22 <h2>Astromomy Picture Of The Day</h2>23 <figure>
24 {data.media_type === "video" ? (
25 <iframe src={data.url} title="a">Expected the depth of nested jsx elements to be <= 2, but found 5
32 {data.copyright && (
33 <p>Image Credits and Copyright: {data.copyright}</p>
34 )}
35 <p className="title">36 {data.title} - {getReadableDate(data.date)}37 </p>38 </figcaption>
39 </figure>
40 </div>Expected the depth of nested jsx elements to be <= 2, but found 4
37 <button type="submit">Search</button>
38 </form>
39 <div className="button">
40 <button41 onClick={() => {42 const randomDate = generateRandomDate();43 setDate(randomDate);44 }}45 >46 Random47 </button>48 </div>
49 </div>
50 <Result results={results} />Expected the depth of nested jsx elements to be <= 2, but found 5
25 }}
26 >
27 <label htmlFor="date">
28 <input29 type="date"30 name="date"31 id="date"32 max={todaysDate}33 min="1995-06-16"34 defaultValue={todaysDate}35 />36 </label>
37 <button type="submit">Search</button>
38 </form>Expected the depth of nested jsx elements to be <= 2, but found 4
34 defaultValue={todaysDate}
35 />
36 </label>
37 <button type="submit">Search</button>38 </form>
39 <div className="button">
40 <buttonExpected the depth of nested jsx elements to be <= 2, but found 3
18 </a>
19 </li>
20 <li>
21 <a22 href="https://www.twitter.com/dapo_adedire"23 target="_blank"24 rel="noreferrer"25 >26 Twitter27 </a>28 </li>
29 </ul>
30 </footer>Expected the depth of nested jsx elements to be <= 2, but found 3
9 </a>
10 <ul>
11 <li>
12 <a13 href="https://www.github.com/dapoadedire"14 target="_blank"15 rel="noreferrer"16 >17 Github18 </a>19 </li>
20 <li>
21 <a
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>
}