React Interview Questions

What should you review for a React interview?

Which React basics should you check first?

React basics and components appeared in 57 of 154 interviews, making this the most common topic in these interviews. The most asked question was what React is and why you would use it instead of changing the DOM directly.

Can you explain that choice? Then check these questions:

• How do props and state differ?
• What is the virtual DOM, and how does it differ from the real DOM?
• How do you handle events and render lists in a component?

Can you explain when useEffect runs?

Hooks and effects appeared in 47 of 154 interviews. Reviews of answers to the useEffect question found a clear gap: 4 of 6 reviewed answers did not clearly distinguish the dependency-array cases.

Check that your answer separates them:

• No dependency array: the effect runs after every render.
• An empty array: the effect runs on mount.
• Listed dependencies: the effect runs on mount and when dependencies change.

Can you also explain effect cleanup and request cancellation? The Hooks topic includes refs, closures, and custom hooks, so check those as well as useEffect.

Can you explain your state and rendering choices?

State management appeared in 43 of 154 interviews, and rendering performance appeared in 42 of 154 interviews. Check both where data belongs and what causes components to rerender.

• When would you keep state local or lift it to a shared parent?
• How would you choose between Context, Redux, Zustand, and a server-state tool such as React Query or SWR?
• What causes a component to rerender, and how would you prevent unnecessary rerenders?
• How would you use profiling to check performance or improve a large list?

What should you check beyond components and Hooks?

Use these questions to check how you would build and debug a full app:

• How do controlled and uncontrolled inputs differ, and how would you validate a form?
• How would you connect the UI to backend data and handle authentication and authorization?
• How do server-side and client-side rendering differ in Next.js?
• How would you debug incorrect UI data, and when would you use an error boundary?
• How would you organize components and shared dependencies?

What code should you be ready to write?

Coding tasks appeared in 7 of 154 interviews. Try the recorded tasks as checks: can you build a button-driven counter or a toggle switch?

Can you also write a custom hook that returns a debounced search value? Can you fetch data from multiple APIs at the same time and show it in the UI?

Who gets asked React

The 20 most asked React questions

Counted by interview, not by mention: a question asked twice in one conversation counts once.

1. What is React, and why use it instead of manipulating the DOM directly?

   Asked in 15 of 154 interviews · last asked Sep 30 · Concept · Junior

   Show answer

   React is a JavaScript library for building user interfaces from reusable components. You describe what the UI should look like for the current data, and React updates the DOM when that data changes. This reduces manual DOM code and makes complex interfaces easier to maintain.

   • Components split the UI into smaller, reusable pieces.
   • State and props drive what components display.
   • React manages DOM updates, reducing manual work to keep the UI and data in sync.
   • React is not always faster; direct DOM code can be simpler for small tasks.

   What the interviewer checks: The interviewer checks whether you understand React’s component model and how it differs from manual DOM updates.

   Other ways it was asked

   • “What is React?”
   • “What is React, and why is it used?”
   • “What is React, and what is it used for?”

2. How does useEffect work, when does it run, and how do you choose its dependencies?

   Asked in 14 of 154 interviews · last asked Oct 6 · Concept · Junior

   Show answer

   useEffect synchronizes a component with external systems after React commits an update. Without a dependency array, it runs after every component commit; [] runs on mount; [a, b] runs on mount and when either value changes. Include every reactive value the effect reads. Cleanup runs before the effect reruns and when the component unmounts.

   • Reactive dependencies include props, state, and variables or functions declared inside the component.
   • React compares dependencies using Object.is; new objects and functions count as changed values.
   • In development, Strict Mode can run an extra setup-and-cleanup cycle to test cleanup.
   • Effects run only on the client, usually after paint; interaction-triggered effects may run before paint.

   What the interviewer checks: The interviewer checks whether you understand effect timing, cleanup, and choosing dependencies without hiding missing values.

   Common mistake (in 4 of 6 reviewed answers): Many answers forget that no dependency array, an empty array, and listed dependencies produce different run schedules.

   Other ways it was asked

   • “What is the useEffect hook in React, and when would you use it?”
   • “What is useEffect in React?”
   • “What is React's useEffect hook used for?”

3. What are props and state in React, and how do they differ?

   Asked in 13 of 154 interviews · last asked Oct 15 · Concept · Junior

   Show answer

   Props are inputs a component receives from its parent. State is data a component manages and remembers between renders. A component must not change its props, and it updates state through a setter such as the one from useState. Changes to either can cause React to render the component again.

   • Props pass data and functions from parent to child.
   • State holds changing data, such as user input or whether a menu is open.
   • Treat props and state as read-only; use state setters instead of changing state directly.
   • A child can call a callback prop to ask its parent to update data.

   What the interviewer checks: The interviewer checks whether you understand data ownership, parent-to-child data flow, and how components update.

   Other ways it was asked

   • “What are props in React?”
   • “What is the difference between state and props?”
   • “What is state in React, and how is it different from props?”

4. What are React Hooks, and how do common hooks work?

   Asked in 11 of 154 interviews · last asked Oct 8 · Concept · Junior

   Show answer

   React Hooks are functions that let function components use React features, such as state and context. useState stores state; its setter requests a re-render. useEffect synchronizes with external systems after React commits an update, while useContext reads the nearest matching provider’s value.

   • Hooks such as useState must run at the top level of function components or custom Hooks.
   • Effect dependencies control reruns; cleanup runs before setup repeats and when the component unmounts.
   • useRef keeps a value across renders; changing it does not trigger a re-render.
   • useMemo caches a calculation result; useCallback caches a function reference. Both are performance tools.

   What the interviewer checks: The interviewer checks whether you understand common Hooks, their roles, and the rules for calling them.

   Other ways it was asked

   • “What is a hook in React?”
   • “How do hooks work in React?”
   • “What are the hooks available in React?”

5. What causes React components to rerender, and how do you prevent unnecessary rerenders?

   Asked in 10 of 154 interviews · last asked Oct 3 · Concept · Mid-level

   Show answer

   Components rerender when their state changes, their parent renders, or context they read changes. Keep state close to where it is used, and avoid redundant state updates. Use React.memo to skip parent-driven renders when props are unchanged. Use useMemo or useCallback when stable object or function references help memoization.

   • New object, array, or function props can defeat React.memo because it compares each prop using Object.is.
   • React.memo does not block updates from a component’s own state or context.
   • A rerender does not always cause a DOM change.
   • Use React DevTools Profiler to find costly renders before adding memoization.

   What the interviewer checks: The interviewer checks whether you understand render triggers and can reduce wasted work without memoizing everything.

   Other ways it was asked

   • “What can cause excessive renders in a React application?”
   • “How can you prevent unnecessary re-renders in React?”
   • “What can cause unnecessary re-renders in a React application?”

6. What is React's virtual DOM, and how does it differ from the real DOM?

   Asked in 10 of 154 interviews · last asked Oct 21 · Concept · Junior

   Show answer

   React's virtual DOM is an in-memory description of the UI. The real DOM is the browser's tree of page elements. When React renders, it compares the new description with the previous one, then applies needed changes to the real DOM. This helps manage updates, but does not guarantee better performance.

   • Comparing the old and new UI descriptions is part of reconciliation.
   • Rendering a component does not always mean changing the real DOM.
   • The browser uses the real DOM to display the page.
   • Virtual DOM comparisons have a cost; they are not always faster than direct DOM updates.

   What the interviewer checks: The interviewer checks whether you understand how React calculates UI changes and how that differs from browser rendering.

   Other ways it was asked

   • “What is the virtual DOM in React?”
   • “What is the Virtual DOM?”
   • “Why does React use a virtual DOM?”

7. What is the difference between controlled and uncontrolled components in React?

   Asked in 9 of 154 interviews · last asked Oct 8 · Concept · Junior

   Show answer

   A controlled input gets its value from React state and updates that state through an event handler. An uncontrolled input keeps its current value in the DOM. Use controlled inputs when validation or other UI must update as the user types. Use uncontrolled inputs for simpler forms where you read values on submit.

   • Controlled inputs use value or checked, with onChange to update state.
   • Uncontrolled inputs use defaultValue or defaultChecked to set initial values.
   • Read uncontrolled values through refs or FormData.
   • An input should not switch between controlled and uncontrolled during its lifetime.

   What the interviewer checks: The interviewer checks whether you understand who owns the input value and when each approach fits.

   Other ways it was asked

   • “What are controlled and uncontrolled components in React, and when would you use each?”
   • “In React, can you explain the difference between a controlled and uncontrolled component, and when you choose one over the other?”
   • “Can you explain controlled and uncontrolled components in React?”

8. What is Redux, and why would you use it in React?

   Asked in 8 of 154 interviews · last asked Oct 15 · Concept · Junior

   Show answer

   Redux is a library for managing shared application state in a central store. It updates state through dispatched actions and reducers, making changes predictable and easier to debug. In React, React-Redux connects components to the store. I would use it for complex shared state, not for every piece of local component state.

   • Actions describe events; reducers calculate the next state without side effects.
   • React-Redux provides useSelector to read state and useDispatch to send actions.
   • Redux Toolkit is the recommended way to write Redux code.
   • Redux adds structure and tooling, but local state is often enough for simpler apps.

   What the interviewer checks: The interviewer is checking whether you understand Redux’s data flow, React integration, and when it is useful.

   Other ways it was asked

   • “What is Redux?”
   • “Can you explain what Redux does?”
   • “What is Redux, and how does it help manage application state?”

9. How do you choose between local state, Context, state libraries, and server-state tools in React?

   Asked in 7 of 154 interviews · last asked Oct 20 · Concept · Mid-level

   Show answer

   I choose based on who needs the state and where it comes from. I use local state for one component and lift it to a shared parent when needed. Context shares values across a subtree; a state library helps manage complex shared client state. Server-state tools handle fetched data, caching, and refetching.

   • Use useState or useReducer locally before adding app-wide state.
   • Context shares values, but changing its value re-renders components that read it.
   • Libraries like Redux Toolkit or Zustand offer shared stores and selective subscriptions.
   • Tools like TanStack Query manage server data, including loading, errors, caching, and invalidation.

   What the interviewer checks: The interviewer checks whether you match each kind of state to a suitable tool without adding unnecessary complexity.

   Other ways it was asked

   • “How do you manage component state in a React application?”
   • “What are the different ways to manage state in a React application?”
   • “What are the options for centralized state management in a React application?”

10. What's the difference between server-side rendering and client-side rendering in Next.js?

    Asked in 7 of 154 interviews · last asked Sep 14 · Concept · Mid-level

    Show answer

    Server-side rendering (SSR) builds HTML on the server for each request; client-side rendering (CSR) builds content in the browser using JavaScript. SSR can show content sooner and helps search engines read it. CSR suits private dashboards where search visibility matters less. SSR pages still use client JavaScript and hydration to make React components interactive.

    • SSR adds server work per request; slow data fetching can delay the response.
    • CSR may show a loading state while JavaScript and data load.
    • Next.js can combine server-rendered content with client-side updates.
    • In Next.js, 'use client' does not mean browser-only rendering; Client Components can also be prerendered.

    What the interviewer checks: The interviewer checks whether you understand where rendering happens and the trade-offs for loading, search visibility, and interactivity.

    Other ways it was asked

    • “What is the difference between server-side rendering (SSR) and client-side rendering (CSR) in Next.js?”
    • “When would you use client-side rendering rather than server-side rendering in Next.js?”
    • “What is server-side rendering in Next.js?”

11. What are components in React?

    Asked in 6 of 154 interviews · last asked Sep 10 · Concept · Junior

    Show answer

    Components are reusable building blocks for a React user interface. They describe what to show and can receive data through props. Components can be functions or classes, but modern React mainly uses function components. You combine small components to build larger screens.

    • Props pass data from a parent component to a child.
    • Components can use state to track data that changes.
    • Function components use Hooks for state and other React features.
    • Component names must start with a capital letter when used in JSX.

    JavaScriptCopy

    function Greeting({ name }) {
      return <h1>Hello, {name}!</h1>;
    }
    
    export default function App() {
      return <Greeting name="Sam" />;
    }

    What the interviewer checks: The interviewer is checking whether you understand reusable UI parts, props, and the main component types.

    Other ways it was asked

    • “What is a component in React?”
    • “What are the different types of components in React?”
    • “What are React components?”

12. How do useEffect, useMemo, and useCallback differ, and when would you use each?

    Asked in 6 of 154 interviews · last asked Sep 18 · Concept · Mid-level

    Show answer

    useEffect runs side effects after React commits an update, such as connecting to a service. useMemo caches a calculation result to avoid expensive work during rendering. useCallback caches a function reference, not its result, which can help memoized children skip rendering. Use the last two for performance, not to make code work correctly.

    • Dependencies control reruns and cache updates; React compares each dependency using Object.is.
    • Effects can return cleanup functions to remove subscriptions or cancel ongoing work.
    • useMemo calculations run during rendering and must be pure.
    • useCallback does not call your function or prevent renders by itself.

    What the interviewer checks: The interviewer checks whether you distinguish side effects from caching values and function references, and know when each helps.

    Other ways it was asked

    • “What is the difference between useMemo and useCallback?”
    • “What is the difference between useMemo and useCallback, and when would you use them?”
    • “What are the differences between useEffect, useMemo, and useCallback?”

13. How does useState work, and why use it instead of a normal variable?

    Asked in 6 of 154 interviews · last asked Oct 16 · Concept · Junior

    Show answer

    useState is a React Hook that lets a function component remember a value between renders. It returns the current value and a setter that requests a re-render when the value changes. A normal local variable is recreated on each render, and changing it does not tell React to update the screen.

    • Call useState at the top level of a component or custom Hook, not inside conditions or loops.
    • The setter updates state for the next render, not the current render.
    • Use a function update when the new value depends on the previous value.

    JavaScriptCopy

    import { useState } from 'react';
    
    export default function Counter() {
      const [count, setCount] = useState(0);
      return (
        <button onClick={() => setCount(previous => previous + 1)}>
          Count: {count}
        </button>
      );
    }

    What the interviewer checks: The interviewer is checking whether you understand how state persists between renders and makes React update the screen.

    Other ways it was asked

    • “What is useState in React?”
    • “What is the purpose of useState in React?”
    • “What is the useState hook in React, and when would you use it?”

14. How do Angular and React differ, and how would you choose between them?

    Asked in 5 of 154 interviews · last asked Oct 16 · Concept · Mid-level

    Show answer

    Angular is a full framework; React is a library for building user interfaces. Angular includes more tools and conventions, while React leaves more choices to the team. I would choose based on team skills, project needs, and the structure or flexibility we want. AngularJS is an older, unsupported framework, not modern Angular.

    • Angular provides official routing and forms tools; React usually needs extra libraries for these features.
    • Choose Angular when shared conventions help the team; choose React when flexibility matters more.
    • Consider existing code and maintenance costs, not just popularity.
    • Avoid AngularJS for new applications because official support has ended.

    What the interviewer checks: The interviewer is checking whether you understand the differences and can explain a choice based on real project needs.

    Other ways it was asked

    • “What is the difference between Angular and React?”
    • “What is the difference between React and Angular?”
    • “Can you tell me the difference between Angular and React.js?”

15. What is the difference between functional components and class components in React?

    Asked in 5 of 154 interviews · last asked Oct 19 · Concept · Junior

    Show answer

    Function components are JavaScript functions that return UI and use Hooks for state and effects. Class components extend React.Component and use this.state and lifecycle methods. React recommends function components for new code, but class components are still supported.

    • Both receive props and describe reusable parts of the UI.
    • Hooks work in function components, not class components.
    • Function components are not automatically faster; performance depends on how the component is written.
    • Writing an error boundary directly in React still requires a class component.

    What the interviewer checks: The interviewer checks whether you understand both component styles, how they manage state, and which to choose.

    Other ways it was asked

    • “What is the difference between functional components and class components?”
    • “What are the syntax, performance, and use-case differences between React functional and class components?”
    • “What are the differences between class-based and function-based React components?”

16. What is JSX in React?

    Asked in 5 of 154 interviews · last asked Oct 3 · Concept · Junior

    Show answer

    JSX is a syntax extension for JavaScript that lets you write HTML-like markup in your code. A build tool turns it into JavaScript calls that create React elements. These elements describe what React should display. JSX makes UI code easier to read, but React does not require it.

    • JSX looks like HTML, but it follows JavaScript rules and has some different attributes, such as className.
    • Use curly braces to include JavaScript expressions in JSX.
    • A React element describes UI; it is not an actual DOM node.

    JavaScriptCopy

    function Greeting({ name }) {
      return <h1 className="greeting">Hello, {name}!</h1>;
    }

    What the interviewer checks: The interviewer wants to know how JSX relates to JavaScript, React elements, and the displayed UI.

    Other ways it was asked

    • “What is JSX?”
    • “Why do we use JSX in React?”
    • “What is a JSX element?”

17. Can you describe the difference between useEffect and useLayoutEffect, and when you would use each?

    Asked in 5 of 154 interviews · last asked Oct 6 · Concept · Mid-level

    Show answer

    useEffect runs after React commits changes, usually after the browser paints. useLayoutEffect runs after DOM updates but before paint, blocking it. I use useEffect for requests, subscriptions, and other work that does not need to block display. I use useLayoutEffect to measure layout and fix positioning before users see it.

    • Prefer useEffect unless work must happen before paint to prevent a visible flicker.
    • useLayoutEffect blocks painting, so slow work inside it delays what users see.
    • Effects triggered by interactions may run before paint, so useEffect does not guarantee after-paint timing.
    • Neither hook runs during server rendering.

    What the interviewer checks: The interviewer checks whether you understand effect timing and can choose between avoiding flicker and avoiding blocked rendering.

    Other ways it was asked

    • “In React, what's the difference between useEffect and useLayoutEffect, and when would you choose one over the other?”
    • “What is the difference between useEffect and useLayoutEffect?”
    • “What are hooks, and what is the difference between useEffect and useLayoutEffect?”

18. How does useReducer work, and when would you choose it over useState?

    Asked in 5 of 154 interviews · last asked Oct 6 · Concept · Mid-level

    Show answer

    useReducer manages state with a reducer function that takes the current state and an action, then returns the next state. The hook returns the state and a dispatch function for sending actions. I choose it over useState when updates are complex or several state values need to change together.

    • Reducers must be pure: return new state without mutating existing state or causing side effects.
    • Actions describe what happened, keeping related update rules in one place.
    • Use useState for simple, independent values; useReducer adds structure but also more code.
    • As logic grows, use clear action names, extract helper functions, and test the reducer separately.

    What the interviewer checks: The interviewer checks whether you understand reducer updates and can choose the right tool for state complexity.

    Other ways it was asked

    • “What is useReducer in React?”
    • “What is the purpose of useReducer?”
    • “What is a reducer in React?”

19. How do you organize component and application state as a React application grows?

    Asked in 4 of 154 interviews · last asked Jun 19 · Concept · Senior

    Show answer

    I keep state close to where it is used and lift it to a common parent when components share it. I use Context for shared values like theme, and Redux when shared state has complex updates. I keep server data in a query cache. I organize state by feature rather than putting everything in one global store.

    • Use useState for simple local state and useReducer for complex local updates.
    • Calculate values from existing state instead of storing duplicate state.
    • Context shares values; consumers re-render when their provider’s value changes.
    • Use custom hooks to reuse state logic; separate hook calls do not automatically share state.

    What the interviewer checks: The interviewer checks whether you can choose clear state ownership and add shared state tools only when needed.

    Other ways it was asked

    • “In React, how do you manage component-level and application-wide state, where would you store gallery data, and how would that data flow through the application?”
    • “How do you manage component state as a TypeScript and React UI grows in complexity? What techniques do you use, such as lifting state, hooks, or a state-management library?”
    • “How do you manage global application state with Redux or the Context API?”

20. How do React and Next.js differ, and when would you choose Next.js?

    Asked in 4 of 154 interviews · last asked Oct 6 · Concept · Junior

    Show answer

    React is a library for building user interfaces. Next.js is a framework built on React that adds routing, server rendering, and static page generation. I would choose Next.js for a public site that needs searchable content or server features. I would choose React without Next.js when I want a simple client-side app or more control over tools.

    • Next.js uses React; it does not replace it.
    • Next.js provides routing and rendering options that otherwise need separate tools or setup.
    • Server rendering and static generation can help SEO, but do not guarantee better performance.
    • A client-only React app can use static hosting; Next.js server features need a server runtime.

    What the interviewer checks: The interviewer is checking whether you understand library versus framework and can choose based on project needs.

    Other ways it was asked

    • “What factors would you consider when choosing between Next.js and React for the frontend?”
    • “What factors would you consider when choosing between React and Next.js for the frontend, excluding Next.js full-stack features?”
    • “What business factors would you consider when choosing between React and Next.js?”

Live coding round next? Coding mode in the MeetAssist desktop app solves the problem on your screen, with your phone as the remote.

Related interview questions

• Software Engineer interview questions
• AI Engineer interview questions
• QA Engineer interview questions
• DevOps Engineer interview questions
• Angular interview questions
• Node.js interview questions
• Next.js interview questions
• HTML and CSS interview questions
• Spring Boot interview questions
• Android and Kotlin interview questions
• iOS and Swift interview questions

How this list is made

Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.

Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.

The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every React interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.

154 interviews, 115 candidates, Oct 2025 to Oct 2026. Updated every month with new interviews.