JSX tree is too deeply nested. Found 7 levels of nesting
40 const docTOC = useDocTOC();
41 const hiddenSidebarContainer = useContext(HiddenSidebarContainerContext);
42 return (
43 <div className={styles.container}>44 {docTOC.embed && (
45 <CodeEmbed url={docTOC.embed.url} params={docTOC.embed.params} persist type={docTOC.embed.type} />
46 )}JSX tree is too deeply nested. Found 6 levels of nesting
25 }, sameSize ? maxScale * IMAGE_WIDTH : IMAGE_WIDTH), [scales, sameSize]);
26
27 return (
28 <>29 <div className={styles.options}>
30 <div className={styles.option}>
31 <label htmlFor="bicubic">View non-upscaled versions</label>JSX tree is too deeply nested. Found 7 levels of nesting
9
10export function Homepage() {
11 return (
12 <div id={styles.homePage}>13 <HomepageHeader />
14 <main>
15 <section>JSX tree is too deeply nested. Found 5 levels of nesting
85 }, []);
86
87 return (
88 <header className={clsx('hero hero--primary', styles.heroBanner)}> 89 <div className={clsx("row")}>
90 <div className={clsx('col col--4')}>
91 <h1 className="hero__title">Upscale Images in Javascript</h1>JSX tree is too deeply nested. Found 5 levels of nesting
13 ]);
14
15 return (
16 <div className={clsx(`${styles.examples}`)}>17 <div className={styles.left}>
18 <h2>Guides</h2>
19 <p>You can play with UpscalerJS right in the browser. Check out the examples to get started:</p>JSX tree is too deeply nested. Found 6 levels of nesting
25 setSrc(downscaledCanvas.toDataURL());
26 }, [downscaledCanvas]);
27 return (
28 <Dialogue>29 <Pane>
30 <div id={styles.warning}>
31 <Alert variant="warning" open>JSX tree is too deeply nested. Found 5 levels of nesting
29 const { upscaledImageSrc, packageName, modelName } = useModelInfo(model);
30
31 return (
32 <div className={styles.modelTooltip}>33 <h1><a href={`/models/Models/${packageName}#${modelName}`}><span className={styles.packageName}>{packageName}</span> / {modelName}</a></h1>
34 <table>
35 <tbody>
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>
}