React Interview Questions and Answers React Interviews – Top Questions & Answers for Web Developers
React is a JavaScript library for building fast, interactive user interfaces. It helps developers create UI using reusable components.
2. What is a React component? A component is a reusable, self-contained block of UI. Think of components as Lego blocks used to build an entire interface.
3. Difference between Functional and Class Components? Functional Components Class Components Use functions Use ES6 classes Rely on Hooks for state Usethis.state Simple, faster More code-heavy Recommended Legacy
Modern React prefersfunctional components + hooks .
4. What are Hooks in React? Hooks let functional components use state, lifecycle features, and side effects (e.g.,useState,useEffect,useMemo).
JSX is a JavaScript syntax extension that lets you write HTML-like UI code directly inside JavaScript.
6. Why do we use keys in React? Keys help React identify items in lists and update only what changes—improving speed and correctness.
A lightweight copy of the actual DOM. React compares versions and updates only the changed parts, making UI faster.
8. How does React render efficiently? React usesreconciliation , where it compares the Virtual DOM with the previous version and updates only differences.
React Fiber is the updated reconciliation engine enabling smoother UI updates, prioritization, and better rendering.
useState creates a reactive value that re-renders the component whenever it changes.
useEffect performs side effects like API calls, subscriptions, timers after the component renders.
It memoizes expensive calculations so they don’t re-run unnecessarily.
It memoizes callback functions to prevent re-renders in child components.
A mutable object that persists across renders. Great for DOM access or storing values without re-rendering.
Used to share data globally across components without prop drilling.
16. What is prop drilling? Passing data through multiple levels of components unnecessarily.
17. How to avoid prop drilling? Use:
Context API Redux Zustand Jotai Recoil A built-in state-sharing system allowing global data access.
19. What are controlled components? Form elements where React controls the input value via state.
20. What are uncontrolled components? Form elements where values are handled by DOM using refs.
A predictable state management library using a single global store.
22. Core principles of Redux? Single source of truth State is read-only Changes via pure reducers 23. What is Redux Toolkit? The modern way to write Redux — cleaner, faster, reduces boilerplate.
24. Explain React Router. A library for navigation inside React applications using URL-based routing.
25. What are React Fragments? <></> or<React.Fragment> — used to wrap multiple children without adding extra nodes.
26. What are Higher-Order Components (HOCs)? Functions that take a component and return an enhanced component.
27. What are Render Props? A technique to share logic by passing a function as a prop.
28. What is reconciliation? React’s process of comparing the Virtual DOM with the previous version.
29. What is diffing algorithm? A fast tree comparison algorithm used by React to detect changes efficiently.
30. What are synthetic events? React’s wrapper around DOM events providing consistent behavior across browsers.
31. What are portals in React? They render components outside the parent DOM hierarchy viaReactDOM.createPortal.
32. What is error boundary? A component that catches JavaScript errors inside UI and prevents app crashes.
33. Difference between useEffect and useLayoutEffect? useEffect useLayoutEffect Runs after paint Runs before paint Non-blocking Blocking
34. What is server-side rendering (SSR)? Rendering React on the server before sending HTML to the browser. Used by Next.js.
Attaching React event listeners to pre-rendered HTML from the server.
36. What is static site generation (SSG)? Build-time HTML generation — fast and SEO-friendly.
37. What is Suspense in React? A mechanism for handling loading states and asynchronous rendering.
38. What is lazy loading? Loading components only when required usingReact.lazy.
39. What is code splitting? Breaking bundles into smaller chunks loaded on demand.
40. What is memo in React? React.memo prevents unnecessary re-renders for pure components.
41. Difference between state and props? Props State Passed from parent Managed inside component Immutable Mutable Read-only Writable
42. What is lifting state up? Moving shared state to the nearest common parent.
43. What is pure component? A component that re-renders only if props or state change.
Helps detect common bugs by running certain functions twice in development.
45. What is React 18 concurrent mode? Allows React to interrupt and prioritize updates for smoother UIs.
46. What is batching in React? Combining multiple state updates into a single re-render.
A JavaScript function that uses hooks to share reusable logic.
48. Why keys should be unique but stable? Changing keys cause re-mounting; stable keys preserve component state.
Allows passing refs through components to child elements.
A type-checking system for validating component props.
51. What is defaultProps? Default values assigned to props if no value is provided.
52. What are life cycle methods in class components? componentDidMountcomponentDidUpdatecomponentWillUnmount53. What are side effects in React? Anything outside React’s pure rendering:
API calls Subscriptions Timers 54. How to optimize React performance? Memoization Code splitting Virtualization Avoid anonymous functions Use keys properly 55. What is React DevTools? A browser extension to inspect React component structure and performance.
56. What is state immutability? Never modify state directly. Always create new copies.
57. Why shouldn't we update state directly? Direct updates bypass React’s lifecycle and won't trigger re-render.
58. Explain event bubbling. Events propagate from child → parent. React uses it via synthetic events.
59. What is event delegation? Attaching one event listener to a parent instead of many children.
A utility to conditionally join class names.
61. What's new in React 18? Automatic batching Suspense improvements startTransition Server Components 62. What is startTransition? Marks updates as “non-urgent” so UI remains responsive.
63. What are React Server Components (RSC)? New type of components rendered on the server without sending JavaScript to the client.
64. What is hydration error? Mismatch between server-rendered HTML and client-side JavaScript.
Generates unique IDs for accessibility and hydration-safe identifiers.
66. Explain reconciliation in one line. React compares previous and current Virtual DOM and updates only what's changed.
67. What is optimistic UI update? UI updates instantly before server confirmation, then syncs.
68. What is suspense boundary? A wrapper to show fallback content during data loading.
69. What is windowing/virtualization? Rendering only visible list items using libraries likereact-window.
70. What is hydration mismatch? Client-side render differs from pre-rendered HTML — causes warnings.
An alternative touseState for complex state logic.
72. What is shallow comparison? Checking only the top-level values of objects, not nested ones.
73. What is deep comparison? Compares nested values but expensive and slow.
74. What is state lifting? Moving shared state to the nearest parent so children can access it.
75. What is StrictMode double rendering for? Helps identify side-effect issues in development.
76. What is an effect cleanup? A return function insideuseEffect used to clean resources.
77. Why are React apps single-page apps? They use one HTML file and change UI dynamically without reloading.
78. What is hydration streaming? Server sends HTML in chunks for faster rendering.
79. What is the difference between SSR and CSR? SSR CSR Rendered on server Rendered in browser SEO-friendly Slower initial load
80. What is a fallback UI? Temporary loading UI shown during async operations.
81. What is error hydration? A mismatch during hydration due to incorrect HTML.
A React framework providing SSR, SSG, API routes, routing, and optimizations.
83. Explain React’s one-way data flow. Data flows parent → child, ensuring predictable UI.
84. What is a build process in React? Transforms JSX → JavaScript, bundles modules, optimizes output.
85. What is a React synthetic event pool? Previously recycled event objects to improve performance (now disabled).
86. What is Suspense for data fetching? A React feature allowing components to “wait” for async data.
87. What is useDeferredValue? Returns a deferred version of a value for smoother updates.
88. What is the difference between real DOM and virtual DOM? Virtual DOM is faster, lightweight, and updated in memory.
Tool like Webpack or Vite that compiles, bundles and optimizes code.
90. What is hydration root? React’s entry point for hydrating SSR HTML usingcreateRoot.
91. What is React cloneElement? Clones an element with additional props.
92. What is unmounting in React? Removing a component from the DOM.
93. What is a stale closure? When a function captures outdated state values due to closure behavior.
94. Why does useEffect run twice in dev mode? StrictMode intentionally triggers it to catch side-effect bugs.
95. What is a key prop issue? Using array index as key may cause incorrect re-renders.
96. Explain useImperativeHandle. Customizes the instance value exposed withforwardRef.
97. What is a dependency array? Controls whenuseEffect re-runs.
98. What happens if dependency array is empty? Effect runs only once after initial render.
99. What happens if dependency array is missing? Effect runs after every render — usually harmful.
100. Why is React popular? Component-based design Fast rendering Huge ecosystem Reusable logic Easy to scale