JSX tree is too deeply nested. Found 6 levels of nesting
60 };
61
62 return (
63 <AuthProvider> 64 <Navbar />
65 <Container maxW="container.xl">
66 <SimpleGridJSX tree is too deeply nested. Found 7 levels of nesting
89 }
90 };
91 return (
92 <LoadingScreen> 93 <Navbar />
94
95 <Container>JSX tree is too deeply nested. Found 8 levels of nesting
63 });
64
65 return (
66 <LoadingScreen>67 <AuthProvider>
68 <Navbar />
69 <Container maxW="6xl" mt={6}>JSX tree is too deeply nested. Found 5 levels of nesting
46
47 const labels = data.map((keypair) => {
48 return (
49 <Tr>50 <Td>{keypair.label}</Td>
51 <Td>
52 <Stack spacing={2} direction="row">JSX tree is too deeply nested. Found 9 levels of nesting
82 }
83 };
84 return (
85 <AuthProvider> 86 <Box>
87 <Navbar />
88 <Container>JSX tree is too deeply nested. Found 6 levels of nesting
31 onSuccess: () => queryClient.invalidateQueries("keypairs"),
32 });
33 return (
34 <>35 <Button onClick={onOpen} variant="solid" colorScheme="red">
36 Delete
37 </Button>JSX tree is too deeply nested. Found 9 levels of nesting
45
46 };
47 return (
48 <> 49 <Button onClick={onOpen} colorScheme="blue" size="lg">
50 Create new
51 </Button>
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>
}