Found some unnecessary nested blocks JS-0072
Anti-pattern
Minor
19 days ago
—
2 years old
Nested block is redundant
52 </div>
53 </div>
54 )
55 {}56}Nested block is redundant
5import { darkMode } from "../globalStates/theme.js";
6
7export default function CheckYourEmail(props) {
8 {/* We need to split the sign in and sign up into 2 pages 9 */}10 return (
11 <div className={`${(darkMode % 2) ? "dark" : ""}`}>
12 <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">Nested block is redundant
11 <p className="rotate-45 xl:rotate-0">{ labels[i - min] }</p>
12 );
13 }
14 {/*<input type="number" min={min} max={max} name={name} className="text-black dark:text-white bg-neutral-300 dark:bg-neutral-600 appearance-none col-span-2 text-lg outline-neutral-300 dark:outline-neutral-600 px-2"/>*/}15 return (
16 <div className={`${styles.numberInput} ${classes} grid-rows-2 gap-4 lg:gap-0`}>
17 <div>Nested block is redundant
55 {images}
56 </div>
57 )
58 {}59}Nested block is redundant
49 clearInterval(interval);
50 }
51 })
52 {/*<div className="w-full">*/}53 return (
54 <div className={`ml-auto mr-auto flex overflow-hidden mt-7 mb-7 ${styles.imageCarousel} min-h-xl`}>
55 {images}
Description
In JavaScript, prior to ES6, standalone code blocks delimited by curly braces do not create a new scope and have no use.
For example, these curly braces do nothing to foo:
{
var foo = bar();
}
In ES6, code blocks may create a new scope if a block-level binding (let and const), a class declaration or a function declaration (in strict mode) are present. A block is not considered redundant in these cases.
Bad Practice
{}
if (foo) {
bar();
{
baz();
}
}
function bar() {
{
baz();
}
}
{
function foo() {}
}
{
aLabel: {
}
}
Recommended
while (foo) {
bar();
}
if (foo) {
if (bar) {
baz();
}
}
function bar() {
baz();
}
{
let x = 1;
}
{
const y = 1;
}
{
class Foo {}
}
aLabel: {}