Stop 23 · Interview PreparationTechnical · 1/8

HTML, CSS, JavaScript, React, TypeScript

Part of the Frontend Developer Roadmap

In short

Most frontend interviews start with fundamentals, asked in a 'why' form. Using useEffect daily isn't enough. You need to explain what it does and when it runs.

Being able to confidently explain and apply your core stack's fundamentals under interview pressure — not just use them, but explain why they work the way they do.

The jaadu lifts the bonnet of a small car and peers at the engine with a wrench.

Think of it like this

Driving test vs knowing the engine

You can drive daily without knowing how the clutch works. But the mechanic's interview asks exactly that. Interviewers already assume you can 'drive' React. They want to see you understand what's under the bonnet.

Watch it happen

Why the var loop prints 3, 3, 3

enqueue(log(i) #1)
log(i) #1

Front of the queue is coloured

1/6Round 1 of the var loop schedules a callback. It waits in the task queue.

The big ideas

What you need to know

JS: closures, this, event loop

Expect output questions with setTimeout, var vs let, promises and 'what does this print?'.

CSS: box model and layout

Specificity, flexbox vs grid, position values, and how you'd centre a div (have three answers ready).

React: rendering and hooks

When components re-render, why keys matter, what the useEffect dependency array does, and controlled vs uncontrolled inputs.

TypeScript: types that help

interface vs type, generics, union types, and narrowing with typeof or 'in'.

How it works

Answering a concept question

  1. 1

    Define it in one line

    A closure is a function that remembers variables from where it was created.

  2. 2

    Give a tiny example

    Write or say a 3-line snippet.

  3. 3

    Say where you used it

    A real case from your projects, like a debounce hook.

  4. 4

    Mention a gotcha

    Like stale closures in useEffect. Shows depth.

See it in code

Walk through the code

js
1// Classic: what does this print?2for (var i = 0; i < 3; i++) {3  setTimeout(() => console.log(i), 0);4}5// 3, 3, 36 7for (let j = 0; j < 3; j++) {8  setTimeout(() => console.log(j), 0);9}10// 0, 1, 2

1/4var creates one i for the whole function. Each callback is scheduled for later.

var is function-scoped, so all three callbacks share one i, which is 3 by the time they run. let makes a fresh j for each round.

Save yourself the pain

Common mistakes

Oops

Memorising definitions word for word from a blog.

Do this instead

Explain in your own words with an example from your project. Interviewers can tell the difference quickly.

Oops

Saying 'I don't know' and going silent.

Do this instead

Say what you do know and reason out loud. 'I haven't used it, but I think it works like...' is a fine answer.

Your mission

Fundamentals speed round

~40 min

Quick check

In the code above, why does the var loop print 3, 3, 3?

Go deeper

  1. 1Practice explaining closures, the event loop, and CSS specificity out loud, from memory.
  2. 2Do a few live-coding practice sessions building small UI from scratch under time pressure.
  3. 3Review your weakest of the five areas specifically — most candidates have one.

More technical at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge