Validation of JSX maximum depth JS-0415
JSX tree is too deeply nested. Found 7 levels of nesting
51 opt_out_tracking_by_default: shareData ?? false,
52 }
53 return (
54 <MixpanelProvider 55 config={mixpanelConfig} 56 token="ee1f7980362645f72b80bfdd0c7be4a8" 57 > 58 <ErrorBoundary FallbackComponent={ErrorView}>
59 <div className="flex flex-1 pointer">
60 <Toaster theme="dark" />JSX tree is too deeply nested. Found 5 levels of nesting
58 )
59
60 return (
61 <WizardLayout 62 title={title} 63 backButtonPath={-1} 64 footer={ 65 <> 66 <div className="flex items-center gap-2"> 67 <input 68 type="checkbox" 69 className="checkbox rounded-md" 70 checked={termsAccepted} 71 onClick={toggleAccepted} 72 data-testid="onboarding/tosCheckbox" 73 id="tosCheckbox" 74 /> 75 <label htmlFor="tosCheckbox" className="label"> 76 I accept Terms of Service. 77 </label> 78 <a 79 href="https://get.pallad.co/terms" 80 target="_blank" 81 rel="noopener noreferrer" 82 > 83 <ExternalLinkIcon size={24} /> 84 </a> 85 </div> 86 <button 87 type="button" 88 className="btn btn-primary max-w-48 w-full" 89 disabled={ 90 !termsAccepted || 91 !dirtyFields.walletName || 92 !dirtyFields.spendingPassword 93 } 94 onClick={handleSubmit(onSubmit)} 95 data-testid="formSubmit" 96 > 97 <span>Next</span> 98 </button> 99 </>100 }101 >102 <div className="flex flex-col flex-1 gap-4">
103 <div className="flex flex-col">
104 <label htmlFor="walletNameInput" className="label">JSX tree is too deeply nested. Found 5 levels of nesting
12 resetErrorBoundary()
13 }
14 return (
15 <div className="flex flex-1 flex-col justify-center items-center min-h-screen w-full p-8">16 <div className="card flex flex-col flex-1 bg-secondary w-full">
17 <div className="card-body flex-1 flex flex-col gap-4 p-4">
18 <h1 className="text-xl">Woops</h1>JSX tree is too deeply nested. Found 6 levels of nesting
32 onDecline()
33 }
34 return (
35 <div className="flex flex-1 justify-center items-center bg-secondary">36 <div className="flex max-w-[480px] max-h-[772px] h-full flex-1 bg-neutral rounded-xl">
37 <AppLayout>
38 <MenuBar variant="card" onCloseClicked={onClose} />JSX tree is too deeply nested. Found 6 levels of nesting
44 .toString()
45 .split(".")
46 return (
47 <AppLayout> 48 <MenuBar variant="dashboard" publicAddress={publicAddress} />
49 <Skeleton loading={loading} h="62px">
50 <PortfolioValueChart
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>
}