React and Modern JavaScript Interview Questions: How to Prepare for Technical Interviews

React interview questions are the set of technical questions that front-end hiring teams use to test your JavaScript fundamentals, your grasp of React's component model and your ability to solve a real UI problem under time pressure. I have managed web projects since 2012. When I hire developers for client work, I sit on the other side of the table and ask these questions myself.

This guide groups the questions by topic and gives short answers with code. It also explains what the interviewer is really checking. A good answer does more than repeat a definition; it explains why. You can find more technical articles in the software category.

What are the most common react interview questions and how should you prepare?

React interview questions cover four areas: modern JavaScript fundamentals, core React concepts, hooks and state management, and performance and architecture. To prepare, answer a few questions from each area in your own words, write a small piece of code for each and explain out loud why that code works.

The demand is real, too. According to the Stack Overflow 2025 Developer Survey, about 66 percent of respondents use JavaScript. React sits at roughly 44.7 percent, which makes it the most used web framework in that survey. As a result, most front-end job ads include a stage that tests React directly.

My advice, therefore, is simple. Start with JavaScript, then move to React, and finish with architecture. Candidates with a weak foundation struggle with hooks, because you cannot really understand useEffect dependencies without closures and reference equality.

What stages does a front-end technical interview usually have?

The flow differs between companies, of course. Still, the pattern I see in practice is fairly stable. The table below shows what each stage measures and how you can prepare. Treat the notes as a starting point from field experience, not a guarantee.

For senior roles, the last stage carries more weight. For example, if the company has several teams shipping one site, you should be ready to discuss topics like micro frontend architecture.

Which JavaScript fundamentals do interviewers ask about?

Almost every set of react interview questions opens with a few plain JavaScript items. Here the interviewer checks whether you know the rules of the language and where you would look while debugging.

What is the difference between var, let and const?

var is function scoped. It is hoisted and starts as undefined. In contrast, let and const are block scoped and stay in the temporal dead zone until their line runs. const blocks reassignment, but it does not freeze the object inside. Mentioning that last detail separates a real answer from a memorised one.

const user = { name: "Anna" };
user.name = "Mia"; // works
user = {}; // TypeError

What is the difference between == and ===?

The double equals operator converts types before comparing. Triple equals checks both type and value. That is why most team style guides require ===. A strong answer also notes that null == undefined returns true.

How do primitive and reference types differ?

Numbers, strings, booleans, null, undefined, symbols and bigints copy their value. Objects, arrays and functions, however, share a reference. This split is the key to understanding why React wants a new object when you update state.

How should you answer closure and scope questions?

A closure is a function that keeps access to the variables of the scope where you defined it, even after that scope has finished. Interviewers love this topic because hooks rely directly on closures.

function makeCounter() {
  let count = 0;
  return () => ++count;
}
const next = makeCounter();
next(); next(); // 2

The classic trap is setTimeout inside a loop. With var, every timer shares one variable and prints the final value. With let, each iteration gets a fresh binding. So you see the values you expect.

The React version of this problem is the stale closure. For instance, if you read a state value inside useEffect and leave it out of the dependency array, the effect keeps seeing the value from the first render. Making that link on your own shows the interviewer that you can connect two topics.

What is the difference between this, call, apply and bind?

The value of this depends on how you call a function, not where you wrote it. Call it as an object method and this points to that object. In a plain call under strict mode it is undefined. Arrow functions do not create their own this; instead, they use the outer one.

• call: runs the function now and takes arguments one by one.
• apply: runs the function now and takes arguments as an array.
• bind: does not run the function; it returns a new function with a fixed this.

In the era of class components, this question came up constantly because of event handler binding. Today function components are the norm. That said, you will still meet it if you join a team with an older codebase, so do not skip it.

What do event loop, Promise and async/await questions test?

This group tests whether you understand how the browser runs async work on a single thread. Typically the interviewer shows a snippet and asks for the output order.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// A, D, C, B

Here is the reasoning. Synchronous code finishes first. Then Promise callbacks run from the microtask queue. Finally, setTimeout runs from the macrotask queue. The MDN page on the event loop explains this model in detail.

For async/await, be ready to talk about error handling. If you do not wrap await in try/catch, a rejected Promise can disappear silently. Candidates who skip this detail end up chasing silent bugs in real projects. In addition, you can explain how starting independent requests in parallel with Promise.all, instead of awaiting them one by one, improves page speed.

Which ES6+ features come up in interviews?

Modern React code is full of these features, so interviewers check each one briefly. Keep your answers short; also add a one line example to each.

• Destructuring: you use it to unpack props in the function signature.
• Spread and rest: the standard way to copy state and change one field.
• Optional chaining (?.): stops the app from crashing when an API field is missing.
• Nullish coalescing (??): treats 0 and an empty string as valid values, unlike ||.
• Modules: import and export split code into files, and tree shaking relies on them.

The classic detail here is ?? versus ||. For example, if a cart quantity is 0, quantity || 1 returns 1 and creates a bug. In contrast, quantity ?? 1 keeps the 0. A small example like this proves you actually use the feature.

Why do array methods and immutability matter?

React does not let you mutate state directly; it wants a new value. Therefore interviewers always test how you transform data with map, filter, reduce and spread. A task like "update the quantity of one item in the cart" comes up very often.

setCart(c => c.map(item =>
  item.id === id ? { ...item, qty: item.qty + 1 } : item
));

If you use push, splice or sort, which change the array in place, React sees the same reference and may not update the screen. So knowing the newer copying methods such as toSorted and toSpliced earns extra points.

Next, the follow up usually involves nested objects. To update a deep field you must copy every level. If that code grows, a library like Immer keeps it readable. In short, the interviewer wants to see that you truly understand references.

How does the custom hook question usually appear?

At mid and senior level, a common task is moving repeated logic into a custom hook. A custom hook is a plain function whose name starts with use and which calls other hooks. As a result, several components can share the same logic without copying it.

function useData(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    let cancelled = false;
    fetch(url).then(r => r.json())
      .then(d => { if (!cancelled) setData(d); })
      .catch(setError);
    return () => { cancelled = true; };
  }, [url]);
  return { data, error };
}

The detail the interviewer looks for is the cancel flag. If the user quickly moves to another page, an old request can return late and write the wrong data. The cleanup function prevents that race. You can also mention AbortController as a more modern option.

Also expect a question on the rules of hooks. You call hooks only at the top level of a component or another hook, never inside conditions or loops. The reason is that React matches hooks by call order.

What core React concepts should you be able to explain?

In react interview questions about the core, you usually get asked for a definition. A strong candidate, however, also gives the reason behind it.

What is the Virtual DOM?

The Virtual DOM is a lightweight copy of the UI kept in memory. When state changes, React compares the new tree with the old one and applies only the needed changes to the real DOM. That comparison process is called reconciliation.

What is JSX and can the browser read it directly?

No, it cannot. JSX is an HTML-like syntax inside JavaScript, and a build step turns it into function calls. That is why you write className instead of class and htmlFor instead of for.

What is the difference between a component and an element?

A component is a function that takes props and returns UI. An element is the plain object that function returns, describing what should appear on screen. Explaining this clearly shows you know how React works inside.

How should you explain the difference between props and state?

Put simply, props are data a component receives from outside and does not change. State is data the component owns and changes over time. Both trigger a new render when they change; still, ownership differs.

The follow up is often: "How do two sibling components share data?" The answer is to move state up to their common parent. The React docs call this lifting state up. Then, if the data has to travel deep, you can move on to Context.

What traps hide in useState and useEffect questions?

Among all react interview questions, hooks are the heart of the interview. useEffect in particular is a favourite because it is the most misunderstood API in React.

Why does a state update not show up immediately?

Because a setState call only schedules the next render, nothing changes yet. The variable in the current render stays the same. If you write setCount(count + 1) three times in one handler, the result grows by one. To update based on the previous value, use the function form:

setCount(prev => prev + 1);

How does the useEffect dependency array work?

Without an array, the effect runs after every render. With an empty array, it runs once after mount. With values, it runs again when those values change. The cleanup function runs before the next run or before unmount.

A strong answer refers to the React team's guide "You Might Not Need an Effect". In other words, you should calculate derived data during render instead of copying it into state with an effect. Knowing that Strict Mode runs effects twice in development also earns points.

When should you use useMemo, useCallback and React.memo?

All three exist to avoid needless work or renders. Adding them everywhere, however, is the wrong answer. Here the interviewer checks whether you optimise without measuring.

• useMemo: keeps the result of an expensive calculation until its dependencies change.
• useCallback: keeps a function reference stable, which helps when you pass it to a memoised child.
• React.memo: skips a re-render when props are shallowly equal.

You can add a current detail too. The React team released React Compiler, a tool that aims to handle memoisation automatically at build time. Consequently, new projects need fewer manual useMemo calls. You still need to read these hooks in older codebases, though.

My own follow up question is: "How do you know a component renders too often?" The answer I want is to measure with the React DevTools Profiler first and decide after that.

What should you know about useRef and useReducer?

These two hooks appear less often than useState. Still, I see them regularly in mid level interviews. useRef gives you a box that survives renders and does not trigger a render when it changes. Typical uses include reaching a DOM node, storing a timer id or keeping a previous value.

const inputRef = useRef(null);
const focusInput = () => inputRef.current.focus();

The usual question is: "Why keep a value in a ref instead of state?" The right answer is that you use a ref for data that does not need to appear on screen. Reading a ref during render to display it, on the other hand, gives unreliable results.

useReducer lets you manage several related state fields with a single function. For example, in a checkout form you can hold the step, error and loading flags in one reducer instead of three useState calls. As a result, you read all transitions in one place and testing gets easier.

Why does the key prop matter when rendering lists?

Put simply, the key lets React match list items between renders. Without a stable, unique key, React updates the wrong item. That leads to hard to find bugs, such as input values jumping between rows.

{products.map(p => <ProductCard key={p.id} product={p} />)}

Next, interviewers ask why an array index is a risky key. If you sort, filter or prepend items, the indexes shift and state attaches to the wrong item. An index is acceptable for a list that never changes. Still, a database id is always safer.

As an advanced point, you can mention that changing a key on purpose resets a component. For example, giving a profile form key={userId} starts the form with clean state whenever the user changes.

What is the difference between controlled and uncontrolled components?

In a controlled component, you keep the input value in React state and write every keystroke to state through onChange. In an uncontrolled component, the value stays in the DOM and you read it with a ref when you need it.

const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />

In practice, there is no single right choice. If you need live validation, conditional fields or formatting, the controlled approach is easier. For long, performance sensitive forms, on the other hand, the uncontrolled approach or a library like React Hook Form cuts the number of renders.

Forms are also where user experience breaks most often. The most expensive bugs I see on client sites come from forms with missing error messages. I cover that in my article on UX mistakes that kill sales.

How do you compare Context, Redux and Zustand in state management questions?

The interviewer does not care whether you memorised a library. Instead, they want your reasons for choosing a tool. First, separate the types of state: local UI state, shared client state and server data.

• Context: enough for rarely changing data like theme, language or session. With fast changing data it re-renders every consumer.
• Redux Toolkit: gives large teams a predictable flow, DevTools and middleware.
• Zustand: sets up a global store with little code and uses selectors to avoid extra renders.
• TanStack Query and similar tools: handle server data with caching, retries and syncing.

A strong answer includes a sentence like this: "I do not copy server data into a global store; I leave it to a data fetching library." That split removes the need for Redux in many projects. It also signals hands-on experience.

What do interviewers ask about React 19 and Server Components?

In practice, this topic shows that you follow current releases. The React 19 release post made Actions stable, added APIs such as useActionState, useOptimistic and use, and brought stable support for Server Components.

For Server Components, explaining the core split is enough. Server components run on the server, send no JavaScript to the browser and can reach the database directly. Client components start with the "use client" directive. Anything that needs state, effects or browser APIs lives there.

If you have worked with the Next.js App Router, give a concrete example. For instance, you might fetch the product list in a server component and make only the "add to cart" button a client component. That cuts the JavaScript you ship. Interviewers want to hear decisions like this more than theory.

How should you answer performance and rendering questions?

The performance question is usually open ended: "How would you speed up a slow React page?" Here you should describe an ordered method, not a random list of techniques.

1. Measure first with Lighthouse, Chrome DevTools Performance and the React Profiler.
2. Shrink the bundle with React.lazy and dynamic import for code splitting.
3. Virtualise long lists so rows outside the screen do not render.
4. Optimise images with the right size, a modern format and lazy loading.
5. Cut extra renders by moving state down to the lowest component that needs it.

When you talk about measurement, mention Core Web Vitals, especially INP and LCP. That is a good signal. For a step by step walkthrough, see my guide to the Google Lighthouse performance test. I also explain how speed affects search visibility in how site speed affects SEO.

Which testing and accessibility questions should you expect?

In testing questions, the interviewer cares about your testing mindset more than tool names. React Testing Library's principle is to test a component the way a user sees it. So you focus on visible text, roles and interaction, not internal state.

render(<Counter />);
await userEvent.click(screen.getByRole("button", { name: "Increase" }));
expect(screen.getByText("1")).toBeInTheDocument();

On the accessibility side, common questions include these. Why use a button instead of a div? Where should focus go when a modal opens? How do you write alt text? Keyboard navigation and screen reader support are also part of the front-end standard in serious teams.

Also, do not forget mobile. My article on mobile-first design explains the logic of building from the small screen up. This topic often comes up when the role involves close work with designers.

How should you behave during a live coding task?

In live coding, the process scores as much as the result. The interviewer wants to see how you think. Therefore, talk through your thinking instead of typing in silence.

For example, common tasks include a search box with debounce, fetching API data with loading and error states, pagination, a tabs component and a simple to-do list. For the debounce task, this skeleton helps:

useEffect(() => {
  const t = setTimeout(() => search(query), 300);
  return () => clearTimeout(t);
}, [query]);

First clarify the requirements. Next, write the simplest version that works. After that, add edge cases. Raising empty lists, network errors and rapid repeated requests yourself leaves a much stronger impression than waiting for the interviewer to ask.

How can you prepare for react interview questions in four weeks?

The plan below assumes a working developer with one to two hours a day. The timing is a starting suggestion from field experience, not a guarantee.

1. First week: JavaScript fundamentals such as closures, this, the event loop, Promises and array methods.
2. Second week: React core and hooks, with a small demo component for each hook.
3. Third week: State management, data fetching, testing and accessibility.
4. Final week: Timed live coding practice and rehearsing your own project story.

At the end of each week, run a mock interview with a friend. Recording yourself also helps, because it is the only way to notice filler words. You should also be able to explain how your portfolio project was designed. My guide to web design in Figma can help you speak the same language as designers.

What are the most common mistakes with react interview questions?

From the hiring side, I see the same mistakes again and again. Most of them relate to preparation and communication rather than raw knowledge.

• Reciting a definition and going silent on the "why" question.
• Answering every optimisation question with "I would add useMemo".
• Starting to code in a live task without asking about requirements.
• Making things up instead of saying "I do not know, but here is how I would find out".
• Failing to explain the reasons behind decisions in your own project.

Above all, the last point matters most. For every technology on your CV, be ready for the question "Why did you choose this, and what was the alternative?" An honest answer such as "the team had already decided, but today I would try this" is far more convincing than an inflated story.

Conclusion: where should you start with react interview questions?

To sum up, start with JavaScript fundamentals, reinforce hooks with small demos and give reasoned choices on state management and performance. In every answer, put the "why" next to the "what".

You can use the questions in this guide as a checklist. Once you can answer each one out loud and write a short snippet, you will be ready for most variations on interview day. Finally, rehearse your own project story. What makes technical knowledge convincing is showing how you used it in real work.

What do I look for as an interviewer?

When I look for front-end developers for my own projects, I watch for three signals. First, readable code; variable names and component boundaries say a lot. Second, care for the user. Does the candidate think of loading states, error messages and mobile layout without a prompt?

Third, an understanding of the business side. A website exists to collect sales, bookings or leads. So a candidate who knows how page speed, form flow and search visibility affect results stands out. In my web design projects, the best work with developers happened when we shared that view.