Validation of JSX maximum depth JS-0415
JSX tree is too deeply nested. Found 9 levels of nesting
10 const [showPassword, setShowPassword] = useState (false)
11
12 return (
13 <div className={`${(darkMode % 2) ? "dark" : ""}`}>14 <div className="transition ease-in-out flex flex-col min-h-screen w-full bg-zinc-100 dark:bg-zinc-700 dark:text-neutral-200">
15 <Head>
16 <title>Sign Up - The Caverns</title>JSX tree is too deeply nested. Found 9 levels of nesting
12 const [googleSignin, setGoogleSignin] = useState (false)
13
14 return (
15 <div className={`${(darkMode % 2) ? "dark" : ""}`}>16 <div className="transition ease-in-out flex flex-col min-h-screen w-full bg-zinc-100 dark:bg-zinc-700 dark:text-neutral-200">
17 <Head>
18 <title>Sign In - The Caverns</title>JSX tree is too deeply nested. Found 5 levels of nesting
11export default function Home(props) {
12 const [triggerRefresh, setTriggerRefresh] = useState(0);
13 return (
14 <div className={`${(darkMode % 2) ? "dark" : ""}`}>15 <div className="transition ease-in-out flex flex-col min-h-screen w-full bg-zinc-100 dark:bg-zinc-700 dark:text-neutral-200">
16 <Head>
17 <title>The Caverns</title>JSX tree is too deeply nested. Found 7 levels of nesting
6
7export default function GameInfo(props) {
8 return (
9 <div className={`${(darkMode % 2) ? "dark" : ""}`}>10 <div className="flex flex-col min-h-screen w-full bg-zinc-100 dark:bg-zinc-700 dark:text-neutral-200">
11 <Head>
12 <title>Game Info - The Caverns</title>JSX tree is too deeply nested. Found 5 levels of nesting
32 }
33 const jdata = JSON.parse(data);
34 return (
35 <div className={`${(darkMode % 2) ? "dark" : ""}`}>36 <div className="flex flex-col min-h-screen w-full bg-zinc-100 dark:bg-zinc-700 dark:text-neutral-200">
37 <Head>
38 <title>{ jdata.name } - The Caverns</title>
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>
}