446 React Interview Questions to Crack Frontend Placements

Published October 2026 · avivashishta.com

You commented react, so here are all 446 questions. They come from sudheerj/reactjs-interview-questions, and every one has a full written answer with code in the repo. Each link below jumps straight to its answer. I pulled the list from the repo's README on 1 October 2026.

The short version: 354 current questions plus 92 legacy ones, sorted by topic. Do Hooks and Modern React first, answer each question out loud, then build one small project that uses what you just read. That project is what you talk about in the interview.

Heads up: 92 of the 446 sit in the repo's "Old Q&A" section. Those are older class-component and legacy-API questions the author keeps separate. They still come up in some interviews and in old codebases, but start with the current ones. 80 of the questions (mostly in Old Q&A) don't get their own anchor on GitHub, so those links open the README and you'll need Ctrl + F.

The repo

sudheerj/reactjs-interview-questions ~45K ★

github.com/sudheerj/reactjs-interview-questions

A long-running list of React interview questions with written answers and code examples, kept up to date with React 18 and 19. MIT licensed and free.

The 4 sections I'd start with

  1. Hooks (55 questions). useState, useEffect, useRef, useMemo, useCallback, useReducer and custom hooks. Most frontend rounds live here.
  2. Modern React Features, React 18/19 (37). Concurrent rendering, Server Components, Server Actions, the use hook, useOptimistic. This is what separates you from people who learned React in 2021.
  3. Core React (77). JSX, virtual DOM, reconciliation, props vs state, keys. The fundamentals every round starts with.
  4. React Router (11). Protected routes, 404 pages, query params, loaders and actions.

What to build after

A small app with a protected route, one custom hook, a form using Actions and one optimistic update. Deploy it with a live link.

Jump to a topic

Core React (77) · Hooks (55) · Modern React Features (React 18/19) (37) · React Router (11) · React Redux (34) · React Testing (6) · React Internationalization (6) · React Native (4) · React Supported Libraries and Integration (13) · Miscellaneous (111) · Old Q&A (legacy) (92)

All questions by topic (446)

Source: github.com/sudheerj/reactjs-interview-questions

Core React (77)

  1. What is React?
  2. What is the history behind React evolution?
  3. What are the major features of React?
  4. What is JSX?
  5. What is the difference between an Element and a Component?
  6. How to create components in React?
  7. When to use a Class Component over a Function Component?
  8. What are Pure Components?
  9. What is state in React?
  10. What are props in React?
  11. What is the difference between state and props?
  12. What is the difference between HTML and React event handling?
  13. What are synthetic events in React?
  14. What are inline conditional expressions?
  15. What is "key" prop and what is the benefit of using it in arrays of elements?
  16. What is Virtual DOM?
  17. How Virtual DOM works?
  18. What is the difference between Shadow DOM and Virtual DOM?
  19. What is React Fiber?
  20. What is the main goal of React Fiber?
  21. What are controlled components?
  22. What are uncontrolled components?
  23. What is the difference between createElement and cloneElement?
  24. What is Lifting State Up in React?
  25. What are Higher-Order Components?
  26. What is children prop?
  27. How to write comments in React?
  28. What is reconciliation?
  29. Does the lazy function support named exports?
  30. Why React uses className over class attribute?
  31. What are fragments?
  32. Why fragments are better than container divs?
  33. What are portals in React?
  34. What are stateless components?
  35. What are stateful components?
  36. How to apply validation on props in React?
  37. What are the advantages of React?
  38. What are the limitations of React?
  39. What are the recommended ways for static type checking?
  40. What is the use of react-dom package?
  41. What is ReactDOMServer?
  42. How to use innerHTML in React?
  43. How to use styles in React?
  44. How events are different in React?
  45. What is the impact of indexes as keys?
  46. How do you conditionally render components?
  47. Why we need to be careful when spreading props on DOM elements?
  48. How do you memoize a component?
  49. How you implement Server Side Rendering or SSR?
  50. How to enable production mode in React?
  51. Do Hooks replace render props and higher order components?
  52. What is a switching component?
  53. What are the Pointer Events supported in React?
  54. Why should component names start with capital letter?
  55. Are custom DOM attributes supported in React v16?
  56. How to loop inside JSX?
  57. How do you access props in attribute quotes?
  58. What is React proptype array with shape?
  59. How to conditionally apply class attributes?
  60. What is the difference between React and ReactDOM?
  61. Why ReactDOM is separated from React?
  62. How to use React label element?
  63. How to combine multiple inline style objects?
  64. How to re-render the view when the browser is resized?
  65. How to pretty print JSON with React?
  66. Why can't you update props in React?
  67. How to focus an input element on page load?
  68. How can we find the version of React at runtime in the browser?
  69. How to add Google Analytics for React Router?
  70. How do you apply vendor prefixes to inline styles in React?
  71. How to import and export components using React and ES6?
  72. What are the exceptions on React component naming?
  73. Is it possible to use async/await in plain React?
  74. What are the common folder structures for React?
  75. What are the popular packages for animation?
  76. What is the benefit of styles modules?
  77. What are the popular React-specific linters?

Hooks (55)

  1. How does ReactJS work behind the scenes?
  2. How is useReducer Different from useState?
  3. What is useContext? What are the steps to follow for useContext?
  4. What are the use cases of useContext hook?
  5. When to use client and server components?
  6. What are the differences between page router and app router in nextjs?
  7. Can you describe the useMemo() Hook?
  8. Can Hooks be used in class components?
  9. What is an updater function? Should an updater function be used in all cases?
  10. Can useState take a function as an initial value?
  11. What types of values can useState hold?
  12. What happens if you call useState conditionally?
  13. Is useState Synchronous or Asynchronous?
  14. Can you explain how useState works internally?
  15. What is useReducer? Why do you use useReducer?
  16. How does useReducer works? Explain with an example
  17. Can you combine **useReducer** with **useContext**?
  18. Can you dispatch multiple actions in a row with useReducer?
  19. Is dispatch from useReducer asynchronous and does it update state immediately?
  20. How does useContext works? Explain with an example
  21. Can You Use Multiple Contexts in One Component?
  22. What's a common pitfall when using useContext with objects?
  23. What would the context value be for no matching provider?
  24. How do reactive dependencies in the useEffect dependency array affect its execution behavior?
  25. When and how often does React invoke the setup and cleanup functions inside a useEffect hook?
  26. What happens if you return a Promise from useEffect??
  27. Can you have multiple useEffect hooks in a single component?
  28. How to prevent infinite loops with useEffect?
  29. What are the usecases of useLayoutEffect?
  30. How does useLayoutEffect work during server-side rendering (SSR)?
  31. What happens if you use useLayoutEffect for non-layout logic?
  32. How does useLayoutEffect cause layout thrashing?
  33. How Do You Use useRef to Access a DOM Element in React? Give an example.
  34. Can you use useRef to persist values across renders??
  35. Can useRef be used to store previous values?
  36. Is it possible to access a ref in the render method?
  37. What are the common usecases of useRef hook?
  38. What is useImperativeHandle Hook? Give an example.
  39. When should you use useImperativeHandle?
  40. Is that possible to use useImperativeHandle without forwardRef?
  41. How is useMemo different from useCallback?
  42. Does useMemo prevent re-rendering of child components?
  43. What is useCallback and why is it used?
  44. What are Custom React Hooks, and How Can You Develop One?
  45. How does React Fiber works? Explain in detail.
  46. What is the useId hook and when should you use it?
  47. What is the useDeferredValue hook?
  48. What is the useTransition hook and how does it differ from useDeferredValue?
  49. What is the useSyncExternalStore hook?
  50. What is the useInsertionEffect hook?
  51. How do you share state logic between components using custom hooks?
  52. What is the useDebugValue hook?
  53. How do you handle cleanup in useEffect?
  54. What are the differences between useEffect and useEvent (experimental)?
  55. What are the best practices for using React Hooks?

Modern React Features (React 18/19) (37)

  1. What are the key features introduced in React 18?
  2. What are the key features introduced in React 19?
  3. What is the use() hook in React 19?
  4. What are Server Actions in React 19?
  5. What are useFormState and useFormStatus hooks?
  6. What is the useOptimistic hook?
  7. What is the React Compiler (React Forget)?
  8. What is Streaming SSR and how does React 18+ improve it?
  9. What is renderToPipeableStream and how is it different from renderToString?
  10. What is the difference between HOCs and Hooks?
  11. Does React.memo prevent Context consumers from re-rendering?
  12. How would you create a reusable Context?
  13. Why is Redux Toolkit recommended over Redux?
  14. What is the difference between client state and server state?
  15. How do you prevent unnecessary Redux re-renders?
  16. What is createSelector?
  17. What is normalized Redux state?
  18. Why is normalized state important for performance?
  19. What is Redux middleware?
  20. What is the Redux middleware signature?
  21. What happens when you dispatch an action?
  22. How would you structure Redux in a large application?
  23. How do you handle cross-slice communication?
  24. What are Redux serializable values?
  25. How do you handle race conditions in Redux?
  26. How do you persist Redux state?
  27. How do you debug a Redux performance problem?
  28. What should be stored in Redux vs derived with selectors?
  29. Would you put all API data into Redux?
  30. What is the difference between BrowserRouter, HashRouter, and MemoryRouter?
  31. What are dynamic routes and what are route parameters?
  32. How do you navigate programmatically in React Router?
  33. What is the difference between Link, NavLink, and <a>?
  34. How do you implement protected/private routes?
  35. How do you handle 404 / Not Found routes?
  36. What are loaders, actions, and data APIs in modern React Router?
  37. How do query parameters work?

React Router (11)

  1. What is React Router?
  2. How React Router is different from history library?
  3. What are the <Router> components of React Router v6?
  4. What is the purpose of push() and replace() methods of history?
  5. How do you programmatically navigate using React Router v4?
  6. How to get query parameters in React Router v4?
  7. Why you get "Router may have only one child element" warning?
  8. How to pass params to history.push method in React Router v4?
  9. How to implement _default_ or _NotFound_ page?
  10. How to get history on React Router v4?
  11. How to perform automatic redirect after login?

React Redux (34)

  1. What is flux?
  2. What is Redux?
  3. What are the core principles of Redux?
  4. What are the downsides of Redux compared to Flux?
  5. What is the difference between mapStateToProps() and mapDispatchToProps()?
  6. Can I dispatch an action in reducer?
  7. How to access Redux store outside a component?
  8. What are the drawbacks of MVW pattern?
  9. Are there any similarities between Redux and RxJS?
  10. How to reset state in Redux?
  11. What is the difference between React context and React Redux?
  12. Why are Redux state functions called reducers?
  13. How to make AJAX request in Redux?
  14. Should I keep all component's state in Redux store?
  15. What is the proper way to access Redux store?
  16. What is the difference between component and container in React Redux?
  17. What is the purpose of the constants in Redux?
  18. What are the different ways to write mapDispatchToProps()?
  19. What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?
  20. How to structure Redux top level directories?
  21. What is redux-saga?
  22. What is the mental model of redux-saga?
  23. What are the differences between call() and put() in redux-saga?
  24. What is Redux Thunk?
  25. What are the differences between redux-saga and redux-thunk?
  26. What is Redux DevTools?
  27. What are the features of Redux DevTools?
  28. What are Redux selectors and why use them?
  29. What is Redux Form?
  30. What are the main features of Redux Form?
  31. How to add multiple middlewares to Redux?
  32. How to set initial state in Redux?
  33. How Relay is different from Redux?
  34. What is an action in Redux?

React Testing (6)

  1. What is Shallow Renderer in React testing?
  2. What is TestRenderer package in React?
  3. What is the purpose of ReactTestUtils package?
  4. What is Jest?
  5. What are the advantages of Jest over Jasmine?
  6. Give a simple example of Jest test case

React Internationalization (6)

  1. What is React Intl?
  2. What are the main features of React Intl?
  3. What are the two ways of formatting in React Intl?
  4. How to use <FormattedMessage> as placeholder using React Intl?
  5. How to access current locale with React Intl?
  6. How to format date using React Intl?

React Native (4)

  1. What is the difference between React Native and React?
  2. How to test React Native apps?
  3. How to do logging in React Native?
  4. How to debug your React Native?

React Supported Libraries and Integration (13)

  1. What is reselect and how it works?
  2. What is Flow?
  3. What is the difference between Flow and PropTypes?
  4. How to use Font Awesome icons in React?
  5. What is React Dev Tools?
  6. Why is DevTools not loading in Chrome for local files?
  7. How to use Polymer in React?
  8. What are the advantages of React over Vue.js?
  9. What is the difference between React and Angular?
  10. Why React tab is not showing up in DevTools?
  11. What are Styled Components?
  12. Give an example of Styled Components?
  13. What is Relay?

Miscellaneous (111)

  1. What are the main features of Reselect library?
  2. Give an example of Reselect usage?
  3. Can Redux only be used with React?
  4. Do you need to have a particular build tool to use Redux?
  5. How Redux Form initialValues get updated from state?
  6. How React PropTypes allow different types for one prop?
  7. Can I import an SVG file as react component?
  8. What is render hijacking in react?
  9. How to pass numbers to React component?
  10. Do I need to keep all my state into Redux? Should I ever use react internal state?
  11. What is the purpose of registerServiceWorker in React?
  12. What is React memo function?
  13. What is React lazy function?
  14. How to prevent unnecessary updates using setState?
  15. How do you render Array, Strings and Numbers in React 16 Version?
  16. What are hooks?
  17. What rules need to be followed for hooks?
  18. How to ensure hooks followed the rules in your project?
  19. What are the differences between Flux and Redux?
  20. What are the benefits of React Router V4?
  21. Can you describe about componentDidCatch lifecycle method signature?
  22. In which scenarios do error boundaries not catch errors?
  23. What is the behavior of uncaught errors in react 16?
  24. What is the proper placement for error boundaries?
  25. What is the benefit of component stack trace from error boundary?
  26. What are default props?
  27. What is the purpose of displayName class property?
  28. What is the browser support for react applications?
  29. What is code-splitting?
  30. What are Keyed Fragments?
  31. Does React support all HTML attributes?
  32. When component props defaults to true?
  33. What is NextJS and major features of it?
  34. How do you pass an event handler to a component?
  35. How to prevent a function from being called multiple times?
  36. How JSX prevents Injection Attacks?
  37. How do you update rendered elements?
  38. How do you say that props are readonly?
  39. What are the conditions to safely use the index as a key?
  40. Should keys be globally unique?
  41. What is the popular choice for form handling?
  42. What are the advantages of formik over redux form library?
  43. Why are you not required to use inheritance?
  44. Can I use web components in react application?
  45. What is dynamic import?
  46. What are loadable components?
  47. What is suspense component?
  48. What is route based code splitting?
  49. What is the purpose of default value in context?
  50. What is diffing algorithm?
  51. What are the rules covered by diffing algorithm?
  52. When do you need to use refs?
  53. Must prop be named as render for render props?
  54. What are the problems of using render props with pure components?
  55. What is windowing technique?
  56. How do you print falsy values in JSX?
  57. What is the typical use case of portals?
  58. How do you set default value for uncontrolled component?
  59. What is your favorite React stack?
  60. What is the difference between Real DOM and Virtual DOM?
  61. How to add Bootstrap to a react application?
  62. Can you list down top websites or applications using react as front end framework?
  63. Is it recommended to use CSS In JS technique in React?
  64. Do I need to rewrite all my class components with hooks?
  65. What is useEffect hook? How to fetch data with React Hooks?
  66. Is Hooks cover all use cases for classes?
  67. What is the stable release for hooks support?
  68. Why do we use array destructuring (square brackets notation) in useState?
  69. What are the sources used for introducing hooks?
  70. How do you access imperative API of web components?
  71. What is formik?
  72. What are typical middleware choices for handling asynchronous calls in Redux?
  73. Do browsers understand JSX code?
  74. Describe about data flow in react?
  75. What is MobX?
  76. What are the differences between Redux and MobX?
  77. Should I learn ES6 before learning ReactJS?
  78. Explain concurrent rendering with an example
  79. What is the difference between async mode and concurrent mode?
  80. What is the purpose of eslint plugin for hooks?
  81. What is the difference between Imperative and Declarative in React?
  82. What are the benefits of using TypeScript with ReactJS?
  83. How do you make sure that user remains authenticated on page refresh while using Context API State Management?
  84. What are the benefits of new JSX transform?
  85. How is the new JSX transform different from old transform??
  86. What are React Server components?
  87. What is prop drilling?
  88. What is the difference between useState and useRef hook?
  89. What is a wrapper component?
  90. What are the differences between useEffect and useLayoutEffect hooks?
  91. What are the differences between Functional and Class Components?
  92. What is strict mode in React?
  93. What is the benefit of strict mode?
  94. Why does strict mode render twice in React?
  95. What are the rules of JSX?
  96. What is the reason behind multiple JSX tags to be wrapped?
  97. How do you prevent mutating array variables?
  98. What are capture phase events?
  99. How does React updates screen in an application?
  100. How does React batch multiple state updates?
  101. Is it possible to prevent automatic batching?
  102. What is React hydration?
  103. How do you update objects inside state?
  104. How do you update nested objects inside state?
  105. How do you update arrays inside state?
  106. How do you use immer library for state updates?
  107. What are the benefits of preventing the direct state mutations?
  108. What are the preferred and non-preferred array operations for updating the state?
  109. What will happen by defining nested function components?
  110. Can I use keys for non-list items?
  111. What are the guidelines to be followed for writing reducers?

Old Q&A (legacy) (92)

  1. What is Concurrent Rendering? (Legacy)
  2. Why should we not update the state directly?
  3. What is the purpose of callback function as an argument of setState()?
  4. How to bind methods or event handlers in JSX callbacks?
  5. How to pass a parameter to an event handler or callback?
  6. What is the use of refs?
  7. How to create refs?
  8. What are forward refs?
  9. Which is preferred option with in callback refs and findDOMNode()?
  10. Why are String Refs legacy?
  11. What are the different phases of component lifecycle?
  12. What are the lifecycle methods of React?
  13. How to create props proxy for HOC component?
  14. What is context?
  15. What is the purpose of using super constructor with props argument?
  16. How to set state with a dynamic key name?
  17. What would be the common mistake of function being called every time the component renders?
  18. What are error boundaries in React v16?
  19. How are error boundaries handled in React v15?
  20. What is the purpose of render method of react-dom?
  21. What will happen if you use setState() in constructor?
  22. Is it good to use setState() in componentWillMount() method?
  23. What will happen if you use props in initial state?
  24. How you use decorators in React?
  25. What is CRA and its benefits?
  26. What is the lifecycle methods order in mounting?
  27. What are the lifecycle methods going to be deprecated in React v16?
  28. What is the purpose of getDerivedStateFromProps() lifecycle method?
  29. What is the purpose of getSnapshotBeforeUpdate() lifecycle method?
  30. What is the recommended way for naming components?
  31. What is the recommended ordering of methods in component class?
  32. Why we need to pass a function to setState()?
  33. Why is isMounted() an anti-pattern and what is the proper solution?
  34. What is the difference between constructor and getInitialState?
  35. Can you force a component to re-render without calling setState?
  36. What is the difference between super() and super(props) in React using ES6 classes?
  37. What is the difference between setState() and replaceState() methods?
  38. How to listen to state changes?
  39. What is the recommended approach of removing an array element in React state?
  40. Is it possible to use React without rendering HTML?
  41. What are the possible ways of updating objects in state?
  42. What are the approaches to include polyfills in your create-react-app?
  43. How to use https instead of http in create-react-app?
  44. How to avoid using relative path imports in create-react-app?
  45. How to update a component every second?
  46. Why is a component constructor called only once?
  47. How to define constants in React?
  48. How to programmatically trigger click event in React?
  49. How to make AJAX call and in which component lifecycle methods should I make an AJAX call?
  50. What are render props?
  51. How to dispatch an action on load?
  52. How to use connect() from React Redux?
  53. Whats the purpose of at symbol in the Redux connect decorator?
  54. How to use TypeScript in create-react-app application?
  55. Does the statics object work with ES6 classes in React?
  56. Why are inline ref callbacks or functions not recommended?
  57. What are HOC factory implementations?
  58. How to use class field declarations syntax in React classes?
  59. Why do you not need error boundaries for event handlers?
  60. What is the difference between try catch block and error boundaries?
  61. What is the required method to be defined for a class component?
  62. What are the possible return types of render method?
  63. What is the main purpose of constructor?
  64. Is it mandatory to define constructor for React component?
  65. Why should not call setState in componentWillUnmount?
  66. What is the purpose of getDerivedStateFromError?
  67. What is the methods order when component re-rendered?
  68. What are the methods invoked during error handling?
  69. What is the purpose of unmountComponentAtNode method?
  70. What are the limitations with HOCs?
  71. How to debug forwardRefs in DevTools?
  72. Is it good to use arrow functions in render methods?
  73. How do you say that state updates are merged?
  74. How do you pass arguments to an event handler?
  75. How to prevent component from rendering?
  76. Give an example on How to use context?
  77. How do you use contextType?
  78. What is a consumer?
  79. How do you solve performance corner cases while using context?
  80. What is the purpose of forward ref in HOCs?
  81. Is ref argument available for all functions or class components?
  82. Why do you need additional care for component libraries while using forward refs?
  83. How to create react class components without ES6?
  84. Is it possible to use react without JSX?
  85. How do you create HOC using render props?
  86. What is react scripts?
  87. What are the features of create react app?
  88. What is the purpose of renderToNodeStream method?
  89. How do you get redux scaffolding using create-react-app?
  90. What is state mutation and how to prevent it?
  91. What are React Mixins?
  92. Can I use javascript urls in react16.9?

How I'd use this

Need more project ideas? Pick one from 740 free build-your-own-x tutorials, or find companies that interview on real work in 760 companies that hire without LeetCode.

Follow @avi_vashishta29 for one practical AI dev resource a day.

← Portfolio · Blog