React.js continues to be one of the most demanded frontend libraries in 2025. Whether you are preparing for an internship, junior role, or senior React developer position, these Top 100 React Interview Questions will help you crack your next interview with confidence.
1. What is React?
React is an open-source JavaScript library used for building user interfaces, especially single-page applications.
2. What are the key features of React?
- Virtual DOM
- Component-based architecture
- One-way data binding
- JSX support
- Reusable components
3. What is JSX?
JSX is a JavaScript XML-like syntax used to write HTML inside JavaScript.
4. What is Virtual DOM?
Virtual DOM is an in-memory representation of the real DOM. React updates the UI efficiently by comparing differences (diffing) and applying only necessary changes.
5. What are components in React?
Components are reusable UI blocks. They can be class components or functional components.
6. What is the difference between functional and class components?
Functional components use functions and hooks.
Class components use ES6 classes and lifecycle methods.
7. What is a state in React?
State is a built-in object that stores dynamic data that affects the component’s output.
8. What is props?
Props (properties) are read-only values passed from parent to child components.
9. Can you modify props?
No, props are immutable.
10. What is lifting state up?
Sharing state between components by moving it to their nearest common ancestor.
11. What is React Hook?
Hooks allow functional components to manage state, lifecycle, and side effects.
12. What is useState?
A hook used to maintain state in functional components.
13. What is useEffect?
A hook to handle side effects like API calls, timers, subscriptions.
14. What is dependency array in useEffect?
It tells React when the effect should re-run.
15. What happens if dependency array is empty?
The effect runs only once like componentDidMount.
16. What is useRef?
A hook used to store mutable values that do not cause re-render.
17. What is useMemo?
Used for memoizing expensive calculations to improve performance.
18. What is useCallback?
Used to memoize functions to prevent unnecessary re-renders.
19. What is React Fragment?
A wrapper to group elements without adding extra DOM nodes:
<>...</>
20. What is reconciliation?
The process where React updates the UI by comparing the Virtual DOM with the previous version.
21. What is the difference between state and props?
State is mutable and local.
Props are immutable and passed from parent.
22. What is the purpose of key in lists?
Keys help identify items in lists to optimize rendering.
23. What happens if you don’t use keys?
React may re-render inefficiently or incorrectly.
24. What is conditional rendering?
Rendering UI based on a condition:
{isLoggedIn ? <Home/> : <Login/>}
25. What is React Router?
A library used for navigation between pages in React apps.
26. What are the main components of React Router?
- BrowserRouter
- Routes
- Route
- Link
- useNavigate
27. What is Single Page Application (SPA)?
A web app that loads once and updates UI without refreshing.
28. What is Redux?
A predictable state management library.
29. What are the main principles of Redux?
- Single source of truth
- State is read-only
- Pure reducers
30. What is a reducer?
A pure function that returns new state based on action.
31. What is an action?
An object that describes an event, usually containing a type and payload.
32. What is Redux Thunk?
A middleware that enables async actions.
33. What is Redux Toolkit?
An official, simplified way of writing Redux logic.
34. What is context API?
A React feature used to avoid prop drilling.
35. What is prop drilling?
Passing props through multiple levels unnecessarily.
36. What is StrictMode?
A development-mode tool that highlights potential issues.
37. What is React.memo?
A higher-order component to memoize functional components.
38. What is an error boundary?
A component that catches JavaScript errors in children.
39. What is lazy loading?
Loading components only when needed using React.lazy().
40. What is Suspense?
A component used to show a fallback UI while lazy components load.
41. What is hydration?
Attaching event listeners to server-rendered HTML (for SSR).
42. What is SSR?
Server Side Rendering: rendering pages on the server instead of client.
43. What is CSR?
Client Side Rendering: rendering done in the browser.
44. What is Next.js?
A React framework for SSR, SSG, API routes and performance.
45. What is SSG?
Static Site Generation: pre-rendering pages at build time.
46. What is useLayoutEffect?
Like useEffect but runs synchronously after DOM mutations.
47. What is portal in React?
Rendering children into a DOM node outside the parent.
48. What is synthetic event?
A wrapper around browser events for cross-browser compatibility.
49. What is the difference between controlled and uncontrolled components?
Controlled: data controlled by React.
Uncontrolled: data controlled by DOM.
50. What is forwardRef?
Allows passing refs from parent to child.
51. What is a custom hook?
A reusable function that uses React hooks.
52. What is reconciliation algorithm?
React’s diffing algorithm used to update UI efficiently.
53. What is componentDidMount?
A class component lifecycle method fired after initial render.
54. What is shouldComponentUpdate?
Used to control whether a component should re-render.
55. What is componentWillUnmount?
Called just before component is destroyed.
56. What is PureComponent?
A component that updates only when props/state change.
57. What is the difference between useMemo and useCallback?
useMemo memoizes values.
useCallback memoizes functions.
58. Why React is fast?
Because of virtual DOM, diffing algorithm, and component reusability.
59. What is rendering in React?
The process of generating UI from component code.
60. What causes re-render in React?
- State change
- Props change
- Parent re-render
61. What is the difference between map and forEach in React rendering?
map() returns an array of elements; forEach() does not.
62. What is HOC (Higher-Order Component)?
A function that takes a component and returns a new component.
63. What is children prop?
A special prop used to pass elements as content:
<Card>Content</Card>
64. What is React Fiber?
A re-written core engine of React for faster rendering.
65. What is concurrent mode?
A set of features that make rendering interruptible and smoother.
66. What is batching?
React groups multiple state updates into one re-render.
67. What is diffing?
Calculating differences between two virtual DOM trees.
68. What is useId?
A hook to generate unique IDs for accessibility.
69. What is useTransition?
Helps mark state updates as non-urgent to avoid blocking UI.
70. What is useDeferredValue?
Lets you defer updating non-urgent parts of UI.
71. What is event bubbling?
Events propagate from child to parent DOM elements.
72. What is event capturing?
Opposite of bubbling; event moves from parent → child.
73. What is React Native?
A framework to build mobile apps using React.
74. What are keys in React lists?
Unique identifiers used to track list items.
75. What is the purpose of index as key?
Avoid using indexes unless list is static.
76. What is double rendering in StrictMode?
React intentionally renders components twice in development to detect side-effects.
77. What is code splitting?
Breaking code into smaller chunks for faster load.
78. What is a bundler in React?
Tools like Webpack, Vite, Parcel to bundle code.
79. What is NPM?
Node Package Manager for installing libraries.
80. What is yarn?
An alternative package manager to npm.
81. What is Vite?
A fast development server and build tool for React apps.
82. What is minification?
Compressing code to reduce file size.
83. What is tree shaking?
Removing unused code during bundling.
84. What is CSR vs SSR in React?
CSR: Render in browser
SSR: Render on server
85. What is hydration in SSR?
Activating a server-rendered static HTML page.
86. Why React uses one-way data flow?
To make apps predictable and easier to debug.
87. What is a ref?
A reference to DOM elements or component values.
88. Why should keys be unique?
To help React differentiate items for efficient updates.
89. What is shallow rendering?
Testing technique that renders component without children.
90. What is Jest?
A testing framework used for React apps.
91. What is React Testing Library (RTL)?
A testing tool focused on UI behavior rather than implementation.
92. What is enzyme?
A testing utility (old) used for shallow and full DOM rendering.
93. What is snapshot testing?
Stores component UI and compares for unexpected changes.
94. What is forwardRef?
Passing refs to nested child components.
95. What is the difference between mount and shallow in testing?
Mount renders full DOM; shallow renders only component.
96. What is SSR in Next.js?
Rendering React components on the server for better SEO.
97. What is Image Optimization in Next.js?
Automatic compression and responsive image generation.
98. What is API Routes in Next.js?
Serverless functions used as backend APIs.
99. What is hydration error?
Mismatch between server-rendered HTML and client-rendered HTML.
100. Why should you learn React in 2025?
- High demand
- Strong community
- Supports web + mobile
- Easy to learn
- Flexible and scalable