React interview questions in 2026: leveled by seniority, with model answers and how to score them

React interview questions in 2026 cluster around three things: how components render and re-render, how hooks manage state and effects, and how a candidate reasons about performance once an app gets large. The strongest candidates do not just recall the hooks API; they can explain why a component re-rendered and what it would cost to stop it.

This guide levels the questions by seniority, gives a model answer for each, and adds a one-line scoring note so you can run the screen even if React is not your stack.

Almost every React question list online is built for the candidate. The best of them, like the ex-interviewer collections, teach you to answer. None of them tells the interviewer what a strong answer contains versus a weak one. That scoring layer is what this guide adds, so a hiring manager or recruiter can evaluate, not just ask.

A quick note on scope. This is a complete set of react interview questions and answers, leveled by seniority. It covers react hooks interview questions in the middle band and senior react interview questions at the top, including the scenario based react interview questions that separate real experience from study, with the same rubric whether you are screening juniors or fielding react js interview questions for experienced engineers.

Key Takeaways

• The most predictive React question is "why did this re-render," because it tests whether the candidate understands React's actual model rather than memorized hook syntax.

• Level on purpose: juniors explain JSX, props, and state; mid-levels reason about effects and re-renders; seniors reason about performance trade-offs and architecture.

• Score the reasoning, not the API name. "Strong answer ties the re-render to a state or prop change and weighs the cost of memoizing; weak answer just says useMemo" is the rubric.

• Scenario questions separate real experience from study. Ask how they would fix a slow list, not what useCallback does.

• A structured, rubric-scored first round predicts performance far better than an unstructured chat. Schmidt and Hunter put structured interview validity at about 0.51.

What React interview questions actually test in 2026

A React interview tests the mental model, not the API surface. The core ideas are that the UI is a function of state, that React re-renders components when their state or props change, and that hooks are how you hold state and run side effects inside function components. At senior level it tests judgment: when to optimize, how to manage shared state, and how to keep a large app fast.

The questions below are grouped by seniority and paired with a model answer and a scoring note. The scoring note is what lets a non-React interviewer run the screen, because it names what a strong answer covers versus where a weak one stops.

Junior-level React questions

These confirm the candidate understands the fundamentals. A junior hire does not need architecture opinions, but they must understand components, props, state, and rendering basics.

What is JSX, and what does it compile to? JSX is a syntax extension that lets you write markup-like code inside JavaScript. It is not HTML; it compiles to function calls (historically React.createElement, now the automatic JSX runtime) that produce the elements React renders. That is why you can use JavaScript expressions inside braces. Scoring note: Strong answer knows JSX is not HTML and compiles to function calls. Weak answer treats JSX as "HTML in JavaScript" with no idea what it becomes.

What is the difference between props and state? Props are inputs passed into a component from its parent and are read-only from the component's perspective. State is data the component owns and can change over time with a setter, and changing it triggers a re-render. Props flow down; state is local and mutable through its setter. Scoring note: Strong answer notes props are read-only and state changes trigger re-renders. Weak answer blurs the two or thinks a component can mutate its own props.

What is a key in a list, and why does it matter? A key is a stable identifier you give each item when rendering a list, so React can match items between renders and update only what changed. Without stable keys (or using the array index as a key), React can mis-associate items, causing wrong updates or lost input state. Scoring note: Strong answer explains reconciliation and why index keys are risky. Weak answer says "React needs a key" without why.

What is the difference between a controlled and an uncontrolled input? A controlled input's value is driven by React state, so React is the single source of truth and you update state on every change. An uncontrolled input keeps its own value in the DOM and you read it with a ref when needed. Controlled is the default choice when you need to validate or react to input. Scoring note: Strong answer names the source of truth in each. Weak answer knows the terms but not which to reach for.

Mid-level React questions

These test the part most candidates get wrong: how rendering and effects actually work. A mid-level engineer should reason about re-renders rather than guess.

What causes a component to re-render? A component re-renders when its state changes, when its props change, or when its parent re-renders. A common mistake is assuming a re-render means the DOM changed; React re-runs the component function and diffs the result, only touching the DOM where it actually differs. Understanding this is the key to performance work. Scoring note: Strong answer lists all three triggers and separates re-render from actual DOM update. Weak answer thinks every re-render repaints the screen.

How does useEffect work, and what does the dependency array do? useEffect runs side effects after render. The dependency array controls when it re-runs: an empty array runs it once after mount, a populated array re-runs it when any listed value changes, and omitting it runs the effect after every render. The cleanup function runs before the next effect and on unmount. Most effect bugs come from a wrong or missing dependency. Scoring note: Strong answer covers the three array cases and cleanup. Weak answer knows it "runs after render" but is fuzzy on the dependency array.

When would you use useMemo and useCallback, and what do they cost? useMemo caches a computed value and useCallback caches a function reference, both to avoid recomputing or breaking referential equality across renders. The point candidates miss is that memoization is not free: it adds memory and comparison overhead, so you use it when a computation is genuinely expensive or when a stable reference prevents a costly child re-render, not by default. Scoring note: Strong answer names the cost and uses memoization selectively. Weak answer wraps everything in useMemo "to make it faster."

What problem does Context solve, and what is its downside? Context lets you pass data through the tree without prop drilling, which is useful for things like theme, auth, or locale. The downside is that every consumer re-renders when the context value changes, so putting frequently changing state in a single large context can cause broad re-renders. Splitting contexts or pairing with memoization mitigates it. Scoring note: Strong answer names the re-render downside, not just the convenience. Weak answer treats Context as free global state.

Senior-level React questions

These test judgment and architecture. A senior answer weighs trade-offs and does not reach for a library before understanding the problem.

How do you decide between Context, a state library like Redux or Zustand, and just lifting state up? Start with local state and lift it only as far as needed. Use Context for low-frequency shared values. Reach for a dedicated state library when you have complex, frequently updated global state, derived data, or a need for middleware and devtools. The senior signal is starting from the simplest option and justifying each step up, not defaulting to Redux. Scoring note: Strong answer reasons from simplest to most complex with criteria. Weak answer names a favorite library as the default for everything.

How do you keep a large React app fast? Measure first with the profiler to find what actually re-renders and what is expensive. Then apply targeted fixes: memoize the costly subtrees, virtualize long lists, split code so you ship less JavaScript up front, and move work off the render path. The judgment is that you optimize where the profiler points, not everywhere. Scoring note: Strong answer leads with measurement and names specific techniques. Weak answer lists optimizations without measuring or prioritizing.

How do you approach testing React components? Test behavior, not implementation: render the component, interact the way a user would, and assert on what the user sees, rather than testing internal state or hook calls. This keeps tests resilient to refactors. Reserve end-to-end tests for critical flows and keep most coverage at the component level. Scoring note: Strong answer emphasizes user-facing behavior over internals. Weak answer wants to assert on state and re-render counts.

Scenario-based React questions

Scenario questions are where real experience shows. They are also the format candidates ask for most, and the one that best resists memorization.

A list of a thousand rows scrolls slowly. What do you do? First confirm the cause with the profiler rather than guessing. The usual fix is windowing or virtualization so only the visible rows render, plus memoizing the row component and ensuring stable keys so unchanged rows do not re-render. Throwing useMemo at the parent without virtualizing the list misses the actual problem. Scoring note: Strong answer reaches for virtualization and confirms the cause. Weak answer memoizes blindly without addressing that all rows still render.

A form re-renders the whole page on every keystroke. How do you debug it? Trace where the input's state lives. If it sits in a high-level component or a broad context, every keystroke re-renders everything below it. The fix is to colocate the form state lower in the tree, or isolate it so only the form subtree re-renders. This is a "find the source of truth" problem, not a memoization problem. Scoring note: Strong answer locates the state and moves it down. Weak answer reaches for memoization without finding why everything re-renders.

How to evaluate a React answer when React is not your stack

If you are a recruiter or hiring manager who does not write React, the scoring notes are your rubric, but the sharpest signal is the follow-up. After a clean answer, ask "and what would that cost" or "why did that re-render." A candidate with real experience extends the reasoning; one who studied a list stalls.

That is the gap Expert Hire's AI interview platform closes. It runs a structured React or frontend first round, asks the leveled and scenario questions plus the follow-ups, and scores each answer against a published rubric, returning a scorecard with the transcript and per-question reasoning.

You do not need to write React to run a defensible React screen. Structured, rubric-scored rounds also predict performance far better than an unstructured chat: Schmidt and Hunter put structured interview validity at about 0.51. The scoring methodology is open, and it is the same rubric logic behind every bank in our question library.

How to practice these as a candidate

Do not memorize answers, build the model. Be able to explain why a component re-rendered, what memoization costs, and how you would fix a slow list out loud, because a good interviewer follows up. Practice under light pressure with Expert Hire's practice interviews or a frontend mock interview, and prep the adjacent rounds with the sibling banks: Fastify interview questions cover a backend framework a full-stack loop will probe.

Frequently asked questions

What are React's core principles? The core principles are that the UI is a function of state, that data flows down through props, that components re-render when their state or props change, and that React diffs the result and updates only what actually changed in the DOM. Hooks are how function components hold state and run side effects within that model.

What are React interviewers looking for? Beyond correct answers, interviewers look for an accurate mental model and the ability to reason under follow-up: can the candidate explain why something re-renders, weigh the cost of an optimization, and choose the simplest solution that works. Memorized API knowledge without that reasoning reads as shallow.

Is React hard for beginners? The basics (components, props, state, JSX) are approachable. The parts that take time are the rendering model and effects, which is exactly where mid-level interviews focus. Most beginners can answer junior questions; the re-render and effect questions are where preparation shows.

What senior React questions should I expect? Expect state-architecture trade-offs (Context vs a state library vs lifting state), performance work driven by profiling, testing strategy, and scenario questions like fixing a slow list or a form that re-renders too broadly. These test judgment, not recall.

How many React questions should a first-round screen include? A focused round of six to eight leveled questions plus one or two scenarios, with follow-ups, separates candidates reliably. The depth of the follow-up matters more than the count, which is why a structured, rubric-scored format beats a long unstructured quiz.

The bottom line

The best React interview is not the longest question list, it is a leveled set plus a scenario or two where you know what a strong answer contains and you follow up until the model holds or breaks. Anyone can recite the hooks API. Far fewer can tell you why a component re-rendered and what it would cost to stop it. Score that.

If you want to see what a structured, rubric-scored React round looks like, look at a sample candidate scorecard and decide whether the per-question reasoning is something you would trust to advance a frontend candidate. That is the line between a question bank and a real evaluation.

• By TK, Growth at Expert Hire. Last updated June 30, 2026. Reviewed by Anand Suresh, CPO at Expert Hire.