Stop 20 · Interview PreparationTechnical · 1/8

Frontend fundamentals

Part of the Full Stack Developer Roadmap

In short

Full stack interviews often open with frontend basics: closures, the event loop, how React re-renders, why a layout breaks. Clear, calm answers here set the tone for the rest.

Being able to confidently explain React, state management, and core JS/CSS fundamentals under interview pressure — the frontend half of a full-stack interview.

The purple blob drives a small car around orange cones while an examiner with a clipboard watches.

Think of it like this

The RTO driving test

The RTO inspector doesn't ask for stunts. They watch you check mirrors, signal, and reverse between cones without fuss. Frontend rounds are the same: they want the basics done smoothly, explained in plain words.

Watch it happen

"Why did my component re-render?" in five moves

Define

Mechanism

Example

Pitfall

Your project

1/5One line: a component re-renders when its state changes, its parent re-renders, or a context it reads changes.

The big ideas

What you need to know

JavaScript core

Closures, this, promises vs async/await, the event loop, and == vs ===. Be able to predict output of small snippets.

React mental model

State, props, re-renders, keys in lists, useEffect dependencies, and when you'd reach for context or a store.

CSS that behaves

Box model, flexbox vs grid, position, stacking and responsive units. Expect 'centre this div' with a twist.

Browser basics

What happens when you type a URL, how rendering works, and what blocks the first paint.

See it in code

Walk through the code

tsx

1function Counter() {2  const [count, setCount] = useState(0);3 4  // Bug: each call reads the same old count, so "+3" adds only 15  const addThreeWrong = () => {6    setCount(count + 1);7    setCount(count + 1);8    setCount(count + 1);9  };10 11  // Fix: the updater function always gets the latest value12  const addThree = () => {13    for (let i = 0; i < 3; i++) setCount((c) => c + 1);14  };15  return <button onClick={addThree}>{count}</button>;16}

1/2All three calls close over the same count from this render, so each sets it to 0 + 1.

A classic interview snippet. It tests closures and how React batches state updates in one go.

Save yourself the pain

Common mistakes

Oops

Answering with a memorised definition and stopping there.

Do this instead

Define, explain the mechanism, give a tiny example, then link it to something you built.

Oops

Freezing when asked to predict code output.

Do this instead

Think out loud line by line. Interviewers score your reasoning, not just the final answer.

Your mission

Frontend rapid-fire round

~35 min

Quick check

count is 0. A click runs setCount(count + 1) three times in one handler. What does count become?

Go deeper

1Practice explaining hooks, the virtual DOM, and CSS layout concepts out loud, from memory.
2Do a live-coding practice session building a small React feature under time pressure.
3Review your weakest frontend area specifically.

More technical at this stop