JSX tree is too deeply nested. Found 6 levels of nesting
140
141 <ul className="mt-5 grid grid-cols-2 gap-6 sm:grid-cols-3">
142 {data.data.users.map((user: ManagedUser) => (
143 <li144 key={user.id}145 className="bg-darkBG2 col-span-1 divide-y divide-neutral-800 rounded-md border-[1px] border-neutral-800 shadow-2xl shadow-white/5"146 >147 <div className="flex w-full items-center justify-between space-x-6 p-6">
148 <div className="flex-1 truncate">
149 <div className="flex items-center space-x-3">JSX tree is too deeply nested. Found 8 levels of nesting
101
102 if (isSuccess && data !== null) {
103 return (
104 <div className="bg-darkBG1 min-h-screen">105 <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
106 <div className="px-4 py-6 sm:px-0">
107 <div className="h-96 rounded-lg border-4 border-dashed border-neutral-800">
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>
}