React Machine Coding Interview Questions
The machine-coding round asks you to build a working component live. Here are the most common prompts and how to approach each.
Build a Counter
useState for the count; use functional updaters (c => c + 1) in the handlers so rapid clicks compound correctly. The canonical warm-up.
Build Tabs
Keep the active tab id in state; render a tab list that sets it and show only the active panel. Store the active tab by id, not index. Add role='tab'/'tabpanel' and keyboard support.
Build a Modal
Render into a portal (createPortal), close on Escape via a keydown effect and on backdrop click, and lock body scroll while open. Render nothing when closed.
Build a debounced search box
Controlled input updates the query instantly; a debounced value drives the fetch, so you query only after the user pauses. Guard against out-of-order responses with an active flag or AbortController.
Build an Autocomplete
Debounced fetch for suggestions; track a highlighted index; ArrowUp/Down move it, Enter selects, Escape closes. Close on click-outside and add ARIA combobox/listbox roles.
Build infinite scroll
Observe a sentinel element at the list's end with IntersectionObserver; when it intersects, load and append the next page. Track page and a loading flag to avoid duplicate fetches.
39 machine-coding problems, solved
Every component above, built step by step with clean solutions — in the React Coding Handbook.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- What do interviewers evaluate in machine coding?
- Working code, clean component/state design, edge cases (loading/empty/error), stable keys, and clear communication — not perfect styling.
- How do I practise?
- Build these components from scratch on a timer, out loud, until the boilerplate is automatic.