Validation of JSX maximum depth JS-0415
JSX tree is too deeply nested. Found 5 levels of nesting
12 return (
13 <div className="mb-10" key={idx}>
14 {obj.images ? (
15 <>16 <div className="card w-72 card-bordered card-compact lg:card-normal border-solid border-black bg-white">
17 <figure>
18 <img src={obj.images[0]} />JSX tree is too deeply nested. Found 5 levels of nesting
9}) {
10
11 return (
12 <Link href={`products/${product.name}`}>13 <a>
14 <div className="hover:bg-gray-200 rounded-box flex items-center p-2 active:bg-gray-300">
15 {product.images && (JSX tree is too deeply nested. Found 7 levels of nesting
61 // todo have a gear icon next to the product logo with a drop down menu where you can unfollow
62 return (
63 // todo fix logo, name, and stat centering when screen size is md
64 <div className="bg-gray-100 h-screen justify-center flex overflow-auto"> 65 <div className="mt-4">
66 <div className={"p-4 rounded-box"}>
67 <div className="left-0 top-0 md:left-5 md:top-4 fixed dropdown">JSX tree is too deeply nested. Found 5 levels of nesting
182}
183function MessageCard({ msg }: { msg: message }) {
184 return (
185 <div className="bg-white rounded-3xl items-center mb-5">186 <div className="flex ">
187 {msg.user.pfp && (
188 <AvatarJSX tree is too deeply nested. Found 7 levels of nesting
98 return (
99 <div>
100 {data && (
101 <div>102 <div className="bg-white p-5 rounded-3xl min-w-[20vw] mb-4 items-center mx-4 mt-4 md:mt-0">
103 <button onClick={() => router.back()}>
104 <svg
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>
}