Careeroza

Predict the Output

Event loop order

Example

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

Output

A
D
C
B

Synchronous code first (A, D), then microtasks (C), then macrotasks (B).

Closures in loops

Example

for (var i = 0; i < 3; i++) setTimeout(() => console.log('var', i));
for (let j = 0; j < 3; j++) setTimeout(() => console.log('let', j));

Output

var 3
var 3
var 3
let 0
let 1
let 2

var has one shared binding (already 3 when the timers run); let creates a new binding per iteration.

Stale state

Example

What does the counter show after one click on "+3"?

import { useState } from 'react';

export default function App() {
  const [n, setN] = useState(0);
  const addThree = () => { setN(n + 1); setN(n + 1); setN(n + 1); };
  return <button onClick={addThree}>+3 → {n}</button>;
}

Result

It shows 1, not 3: all three calls use the same n from this render. Use setN(prev => prev + 1).