Command Palette

Search for a command to run...

Hectal
Phase 26Advanced27 of 28 in React

Interview Deep Dives

React internals (fiber, lanes, the scheduler), the classic interview questions, hooks traps, class components and machine coding rounds, all live.

This phase pulls the whole course together for interviews. You'll open React up and look at the fiber tree, the work loop, lanes and the scheduler with live examples that make the machinery visible. Then you'll answer the classic interview questions with model answers, each tied back to the topic that teaches it in depth.

After that come the traps interviewers love: stale closures, effect loops and missing cleanups, each broken live and then fixed with the real React warnings. You'll also learn to read and migrate class components, because most companies still have them, and you'll finish with machine coding rounds: how to plan, build, make accessible and explain a small app against the clock.

Every example runs real React 19.2 in your browser. Treat each topic as a practice interview: predict, explain aloud, then run.

0/5 · 0%
5 topics ~3 h 28 code blocks & diagrams
Start with the first topic
1
26.1

React Internals: Fiber, Lanes and the Scheduler

Inside React every component instance is a fiber, a plain object linked into a tree; a work loop renders fibers one unit at a time, lanes decide which updates go first, and a finished tree is swapped in during a commit that cannot be interrupted.

28 min 4 code practice

2
26.2

Core React Interview Questions

The questions almost every React interview asks (virtual DOM, keys, controlled vs uncontrolled inputs, state vs props, the component lifecycle in hooks, StrictMode and more) with model answers and live demos that prove the tricky claims.

37 min 6 code practice

3
26.3

Hooks Traps: Stale Closures, Effect Loops and Dependencies

Most hooks bugs come from three mistakes: a function that keeps reading values from an old render (a stale closure), an effect whose dependencies change every render (an effect loop), and an effect that sets something up without cleaning it up; each has a reliable fix.

33 min 6 code practice

4
26.4

Class Components and Legacy Code

Before hooks, components with state were JavaScript classes with this.state, this.setState and lifecycle methods; you need to read them, explain how each maps to hooks, and migrate them safely, and error boundaries still have to be classes.

28 min 6 code practice

5
26.5

Machine Coding Rounds

A machine coding round asks you to build a small working UI (tabs, a star rating, nested comments, a file explorer, a stopwatch, a progress bar, pagination) in 45–90 minutes; you pass by clarifying first, planning the state shape, building a working skeleton, then adding behaviour, accessibility and polish while you talk through your choices.

33 min 6 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix the auto-counter stuck at 1

Interview warm-up (10 minutes). This auto-counter should go up by one every 100 ms after Start (id="start") and pause on Stop (id="stop"). Pressing Start again continues from where it stopped.

Intermediate
2

Accessible star rating

Timed build (20 minutes). Turn the five clickable stars into an accessible rating widget.

Advanced
3

Paginate a list

Timed build (20 minutes). Show the 23 items 5 per page in <ul id="items">.

Advanced
4

Migrate a class component to hooks

This NoteBox works, but it's a class. Rewrite it as a function component with hooks without changing what the user sees. After your change the code must not contain the word class (className is fine).

Advanced
5

File explorer with expand and collapse

Timed build (25 minutes). Render the tree data as nested lists inside <ul id="tree">, at any depth (use a recursive component).

Advanced
6

Nested comments with replies

Timed build (30 minutes). Render the initial comments with their replies at any depth. Each comment is an <li className="comment"> containing a <p className="text"> with Author: text, a <button className="reply">Reply</button>, and, when it has replies, a nested <ul> of comments inside the same li.

Advanced