22 React Interview Questions and Answers, Easy to Hard
22 React interview questions with concise model answers, easy to hard — JavaScript internals, hooks, state, performance, and UI system design.
Long Nguyen
Fullstack Developer · AI Engineer · Researcher
How to Use This List
Frontend interviews test more than 'can you use React' — they check JavaScript depth, how React actually works, and whether you can reason about state, performance, and UI architecture. This is a realistic set of 22 questions ordered easy to hard, each with a concise model answer and a note on what the interviewer is listening for. The follow-ups ('why does that re-render?') are where surface knowledge shows.
Warm-Up Questions (Easy)
These open most interviews. A shaky answer here signals gaps; a crisp one buys credibility for the harder rounds.
What's the difference between `let`, `const`, and `var`?
`var` is function-scoped and hoisted, which causes surprises; `let` and `const` are block-scoped. `const` can't be reassigned (though objects it points to can still mutate). Modern code uses `const` by default and `let` when reassignment is needed, avoiding `var`.
What they're testing: scope and hoisting basics
What is a closure, and where have you used one?
A closure is a function that remembers variables from the scope where it was created, even after that scope has returned. They're used for things like private state, callbacks that capture a value, and — in React — hooks capturing state and props.
What they're testing: a fundamental JavaScript concept
What's the difference between `==` and `===`?
`==` compares after type coercion, so `'5' == 5` is true; `===` compares value and type with no coercion, so `'5' === 5` is false. You almost always use `===` to avoid surprising coercion bugs.
What they're testing: type coercion awareness
What is the virtual DOM, and why does React use it?
The virtual DOM is a lightweight in-memory representation of the UI. React updates it first, diffs it against the previous version, and applies only the minimal real DOM changes needed. This makes updates efficient without you manually touching the DOM.
What they're testing: how React updates the UI efficiently
What's the difference between props and state?
Props are passed into a component from its parent and are read-only from the component's view; state is data the component owns and can change over time. Props flow down; state is local and triggers re-renders when it changes.
What they're testing: the most basic React model
Core Questions (Medium)
The heart of the interview, where they check real working knowledge and whether you can explain trade-offs. Expect follow-ups drilling into each answer.
Explain `useEffect` and a common mistake people make with it.
`useEffect` runs side effects after render, and its dependency array controls when it re-runs. A common mistake is a wrong dependency array — omitting a dependency causes stale values, while missing cleanup or an unstable dependency causes infinite loops or leaks.
What they're testing: dependency arrays, cleanup, infinite loops
What causes a component to re-render, and how do you avoid unnecessary ones?
A component re-renders when its state or props change, or its parent re-renders. You avoid unnecessary ones with memoization — React.memo for components, useMemo/useCallback for values and functions — and by structuring state so unrelated updates don't cascade.
What they're testing: render behavior and memoization
What's the difference between controlled and uncontrolled components?
A controlled component's value is driven by React state, so React is the source of truth. An uncontrolled component keeps its own state in the DOM, read via a ref. Controlled is usually preferred for forms because it makes the value predictable.
What they're testing: form handling and where state lives
How does the JavaScript event loop work?
JavaScript runs on a single thread with a call stack. Async callbacks wait in queues and run when the stack is empty — microtasks (like promises) run before macrotasks (like timers). This is how non-blocking async works despite one thread.
What they're testing: the call stack, microtasks versus macrotasks
What are `useMemo` and `useCallback` for, and when are they overused?
`useMemo` caches a computed value and `useCallback` caches a function so they're stable between renders. They help avoid expensive recomputation or unnecessary child re-renders — but wrapping everything adds complexity and overhead, so they're overused when applied without a real performance reason.
What they're testing: performance tools plus the judgment not to overuse them
How do you handle asynchronous data fetching in React?
Fetch in an effect or a data library, track loading and error states, and clean up so a response for an unmounted or superseded request is ignored. Handling loading, errors, and race conditions — not just the happy path — is what makes it robust.
What they're testing: loading/error states, race conditions, cleanup
What's the difference between local state and a global state manager?
Local state lives in one component for data only it cares about. A global state manager shares state across many components without prop-drilling. You reach for global state when the same data is needed in distant parts of the tree, not by default.
What they're testing: when component state stops scaling
What are keys in a list, and why do they matter?
Keys give list items a stable identity so React can match them across renders and update efficiently. Using a stable unique id as the key avoids subtle bugs; using the array index as a key can cause incorrect updates when the list reorders.
What they're testing: reconciliation and avoiding subtle render bugs
What's the difference between `null`, `undefined`, and `NaN` in JavaScript?
`undefined` means a variable has no assigned value; `null` is an intentional 'no value'; `NaN` is the result of an invalid number operation. They behave differently in comparisons, which is a common source of real bugs.
What they're testing: language fundamentals that surface in real bugs
Deep Questions (Hard)
These separate people who've read about the field from people who've worked in it. They reward specific, experience-grounded answers.
A list re-renders on every keystroke and feels laggy. How do you fix it?
Profile to confirm what's re-rendering, then reduce it: memoize list items, ensure stable keys, avoid recreating props each render, and debounce the input so state updates less often. I fix based on what the profiler shows, not by memoizing blindly.
What they're testing: profiling, keys, memoization, debouncing
How do you prevent a stale-closure bug in a React hook?
Stale closures happen when a callback captures an old value of state. Fix it by including the value in the dependency array, using the functional update form of setState, or a ref for values that must always be current. It comes down to understanding what the closure captured and when.
What they're testing: closures over state — an experience-grounded question
How would you structure state for a complex form with interdependent fields?
Keep related state together — often a reducer managing the whole form — so interdependent updates happen in one place rather than a web of effects syncing fields. Derive values where possible instead of storing them, which reduces the ways state can go inconsistent.
What they're testing: state modeling and avoiding an effect tangle
How do you avoid a race condition when a component fetches superseded data?
Track the latest request and ignore responses from older ones — either with an abort controller to cancel the stale request or a flag/cleanup in the effect that discards a response if the inputs have since changed. Otherwise a slow earlier response can overwrite a newer one.
What they're testing: cancellation, cleanup, ignoring stale responses
How do you make a React app accessible, and why does it matter?
Use semantic HTML, label inputs, ensure keyboard navigation and focus management work, and add ARIA only where semantics fall short. It matters because accessibility makes the app usable for everyone and is often a legal and quality requirement, not an extra.
What they're testing: semantic markup and keyboard support — a craft signal
Scenario & System-Thinking Questions
The questions that decide senior offers. There's rarely one right answer — the interviewer watches how you reason about design, trade-offs, and failure. Think out loud.
Design a reusable, accessible autocomplete/typeahead component.
I'd define a clean API (value, onChange, data source), debounce input, handle async suggestions with loading and empty states, support full keyboard navigation and ARIA roles, and handle edge cases like race conditions and no results. Reusability and accessibility drive the design.
What they're testing: component API, async handling, keyboard nav, edge cases
Design the frontend for a dashboard showing live-updating data.
Decide the update mechanism (polling versus websockets), structure state so only affected widgets re-render, and handle loading, errors, and reconnection. I'd focus on performance under frequent updates and keeping the UI responsive as data streams in.
What they're testing: state architecture, update strategy, performance
Structure a large React app so a team of 10 can work without stepping on each other.
Organize by feature with clear boundaries, share only well-defined common components and state, and establish conventions for state management and data fetching. The goal is that teams can work in parallel with minimal coupling and predictable patterns.
What they're testing: architecture, boundaries, shared state, maintainability
How to Actually Prepare
The pattern holds here too: easy questions test knowledge, hard and design questions test reasoning out loud — why something re-renders, how you'd structure state, what trade-offs a component API makes. That's a skill built by practicing the speaking, not only the reading.
Rehearse it for free at ai-interviewer.tech with realistic, tailored mock interviews answered out loud with feedback. And if you're a developer who wants to see how a real, full application is built and shipped end to end, the AI Mock Interview SaaS Starter Kit is the complete source of one you can study and deploy.
FAQ
Frequently asked questions
What JavaScript topics matter most for a React interview?
Closures, scope, the event loop and async behavior, and type coercion come up constantly. Strong React answers rest on solid JavaScript fundamentals, and interviewers probe the language beneath the framework.
How deep do React interviews go on performance?
For mid and senior roles, quite deep — what causes re-renders, when to memoize, and how to fix a laggy list. They want practical judgment, including knowing when optimization tools are overkill.
Do frontend interviews include system design?
Increasingly yes — designing a reusable component like an autocomplete, or structuring a large app's state and architecture. There's no single right answer; interviewers assess how you reason about API design, trade-offs, and scale.
How can I practice frontend interview answers out loud?
Mock interviews are effective because explaining why something re-renders under pressure differs from knowing it. Practicing with tailored questions and feedback — for example at ai-interviewer.tech — builds that fluency.