50 React Interview Questions (Frontend Cheat Sheet for 2026)

How to use this list

Do not memorize 50 paragraphs. For each item, practice saying the one-line answer out loud, then add one example from a project you shipped. Interviewers care that you can connect theory to a bug you actually fixed.

For deeper dives on the hardest JavaScript topic here, read our Event Loop thread — it is the single post on iHateReading most aligned with live coding loops.

HTML & CSS (10 questions)

1. What does <!DOCTYPE html> do? — Tells the browser to use standards mode instead of quirks mode so layout matches modern CSS specs (MDN: DOCTYPE).

2. Why use semantic tags (<main>, <nav>, <article>)? — Screen readers and search engines get structure; you write less div soup.

3. Explain the CSS box model. — Every element is content + padding + border + margin; box-sizing: border-box makes width include padding and border.

4. Flexbox vs CSS Grid — when which? — Flex for one-dimensional alignment (rows or columns); Grid for two-dimensional layouts (MDN: Grid).

5. What is specificity? — Inline > IDs > classes/attributes/pseudo-classes > elements; ties broken by source order.

6. rem vs em? — rem is relative to root font size (stable for spacing); em compounds with nested font sizes.

7. What creates a Block Formatting Context (BFC)? — Floats, absolute positioning, overflow not visible, flex/grid items — contains margins and clears floats.

8. :hover on mobile — pitfalls? — Touch devices may “stick” hover; prefer :focus-visible and explicit tap targets.

9. What is a CSS containment / content-visibility win? — Skips layout/paint for off-screen sections; pairs with scroll-driven UI patterns like CSS scroll and view animations in six lines.

10. How do you avoid layout shift (CLS)? — Reserve space for images/fonts, avoid injecting content above existing UI, measure with Lighthouse (web.dev: CLS).

JavaScript fundamentals (12 questions)

1. var vs let vs const? — Function-scoped vs block-scoped; const binds a reference, not immutability of objects.

2. What is hoisting? — Declarations are registered before execution; let/const stay in temporal dead zone until their line runs.

3. Explain closures. — A function that closes over variables from an outer scope — used for factories, private state, and event handlers.

4. How does the event loop order work? — Run call stack → drain microtasks (Promises) → take one macrotask (timers, I/O) → repeat; see our Event Loop guide for interview-safe wording.

5. Promise vs async/await? — Same underlying mechanism; async/await is syntactic sugar that reads like synchronous code.

6. Shallow vs deep copy? — Shallow duplicates top-level references; deep copy clones nested structures (structuredClone, libraries, or immutable patterns).

7. == vs ===? — Strict equality avoids coercion surprises; default to === in application code.

8. What is the prototype chain? — Objects delegate missing properties to [[Prototype]]; classes are syntactic sugar over prototypes.

9. How does this bind? — Depends on call site: default, implicit object, explicit call/apply/bind, or new.

10. Debounce vs throttle? — Debounce waits for quiet period (search input); throttle caps rate (scroll/resize handlers).

11. ES modules vs CommonJS? — Static import/export (tree-shakeable) vs runtime require in Node legacy bundles.

12. Why can typeof null === "object"? — Historical bug in JS; use value === null or Object.prototype.toString when it matters.

React core (18 questions)

1. What problem does React solve? — Declarative UI from state; the runtime reconciles DOM updates efficiently (React docs: Describing the UI).

2. Virtual DOM — still the right phrase? — React builds a fiber tree and schedules updates; “virtual DOM” is shorthand for diff + commit.

3. What is JSX? — Syntax sugar for React.createElement; must compile to JS.

4. useState — why not mutate state directly? — Mutation skips re-render scheduling; always replace with a new reference for objects/arrays.

5. useEffect dependency array — empty vs omitted? — [] runs once after mount; omitted runs every render; include every reactive value you read.

6. When useMemo vs useCallback? — Memoize expensive values vs stable function references passed to optimized children; do not sprinkle by default.

7. Why do list keys matter? — Keys tell React which items moved/merged; index keys break with reorder/filter.

8. Controlled vs uncontrolled inputs? — React state drives value (controlled) vs DOM holds value (uncontrolled + refs).

9. What is reconciliation? — Diffing old vs new element tree to compute minimal DOM operations.

10. React Fiber — one sentence. — Incremental, interruptible rendering so high-priority updates (input) can preempt heavy work.

11. SSR vs CSR vs SSG? — HTML on server per request vs client-only render vs HTML at build time; hybrids use frameworks like Next.js (Next.js docs).

12. What changed with React 18 concurrent features? — startTransition, Suspense boundaries, and streaming SSR for smoother UX under load.

13. Error boundaries — what they catch. — Render/lifecycle errors in children, not event handlers or async code unless rethrown into render.

14. Context vs global store (Redux/Zustand)? — Context broadcasts slow-changing data; dedicated stores help frequent fine-grained updates and devtools.

15. Custom hooks — rules. — Prefix use, call only at top level, compose other hooks — share stateful logic, not JSX.

16. React.lazy + Suspense? — Code-split components; show fallback while chunk loads — ties directly to bundle-size discipline.

17. Why Strict Mode double-invokes in dev? — Surfaces unsafe side effects; not production behavior.

18. Server Components (RSC) — high level. — Components that run on server, ship minimal JS; client components handle interactivity (React: Server Components).

TypeScript & tooling (4 questions)

1. interface vs type in TS? — Interfaces merge and extend cleanly for object shapes; types excel at unions/intersections and mapped types.

2. What are generics for? — Reusable APIs that preserve type relationships (Array<T>, fetch wrappers, hooks).

3. What does "strict": true buy you? — Catches null/undefined slips, implicit any, and unsafe assumptions at compile time.

4. Starting a greenfield app in 2026? — Pick a maintained starter (free Next.js boilerplates we compared) instead of copying CRA patterns — and know when jQuery still shows up in legacy stacks.

Web platform, HTTP & security (6 questions)

1. What is CORS? — Browser-enforced cross-origin rules; server must send allowed origins/headers/methods (MDN: CORS).

2. REST vs GraphQL — tradeoff. — REST maps resources to URLs; GraphQL lets clients shape one request — costs schema governance and caching complexity.

3. localStorage vs sessionStorage vs cookies? — Persistent origin storage vs tab session vs HTTP cookie jar with size/security flags.

4. XSS — how to prevent? — Escape output, sanitize HTML, use CSP, prefer framework auto-escaping, never dangerouslySetInnerHTML with user input.

5. CSRF — basics. — Cross-site form/API abuse; mitigate with SameSite cookies, CSRF tokens, and OAuth state parameters.

6. HTTP caching headers — name two. — Cache-Control (policy) and ETag/If-None-Match (validation) reduce bandwidth on repeat visits.

After the interview: what to build next

Frontend loops in 2026 often end with “show us a side project.” Useful adjacent paths on iHateReading:

• Ship UI faster — 50+ React code components you can paste into an existing repo (no CLI).
• Understand agent UI, not just buttons — Agent harnessing explains the wrapper code around models (tools, memory, sandbox) that full-stack “AI features” actually need.
• Find roles — Jobs portals lists 50+ boards; our Jobs page curates individual listings.
• Stay current — Frontend section of the magazine or the full React topic hub.

If you want a structured path instead of scattered threads, browse all roadmaps — the AI Agent Developer track is the one to open when the job description mentions Copilot-style features, MCP tools, or in-app agents.

Quick self-check before the loop

• Can you whiteboard the event loop with one timer and one Promise?
• Can you explain one React performance fix you shipped (memoization, split bundle, virtualization)?
• Can you describe one auth choice (session cookie vs JWT in memory) without hand-waving?

If any of those stall, pick three questions from this list, write a five-sentence answer, and link out to the iHateReading threads above — that is enough for a focused evening of prep.

Good luck — and if you land the role, send us a note via contact; we feature builder stories in the monthly magazine when they teach something concrete.