Top 100 React JS Interview Questions and Answers

Basics
 

1. What is React?
React is a JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture and virtual DOM for efficient updates.

2. What are the main features of React?

Component-based
Virtual DOM
Unidirectional data flow
JSX (JavaScript XML)
Declarative UI

3. What is JSX?
JSX is a syntax extension that looks like HTML but compiles to JavaScript (React.createElement).

What are the components in React?
Independent, reusable pieces of UI. Types: Functional & Class components.

4. What is the difference between Functional and Class components?

Functional: Simpler, stateless (but with Hooks, can manage state).
Class: Use lifecycle methods, this.state.

5. What is Virtual DOM?
A lightweight copy of the real DOM. React updates the virtual DOM, calculates the diff, and applies changes to the real DOM efficiently.

6. What is ReactDOM?
A package that provides DOM-specific methods like ReactDOM.render().

7. What are props in React?
Props (properties) are read-only inputs to components.

8. What is a state in React?
An object that determines how a component renders & behaves. Unlike props, it is mutable.

9. Difference between state and props?

Props: Immutable, passed from parent.
State: Mutable, owned by component.

10. What is a pure component?
A component that renders the same output for the same props & state.

11. What is React.Fragment?
Allows grouping of elements without adding extra nodes to the DOM.

12. What are keys in React?
Unique identifiers for list elements, helping React track items efficiently.

13. Why should keys be unique?
To prevent rendering bugs and improve performance during reconciliation.

14. What is reconciliation in React?
The process by which React updates the DOM based on virtual DOM differences.

15. What is create-react-app?
A CLI tool that sets up a new React project with zero config.

16. What is the difference between real DOM and virtual DOM?

Real DOM: Slow updates, re-renders the full tree.
Virtual DOM: Faster, updates only changed nodes.

17. What is conditional rendering?
Rendering UI based on conditions using if, ternary operator, or logical &&.

18. What is the difference between React and Angular?
React: Library, unidirectional, JSX.
Angular: Framework, two-way binding, TypeScript first.

19. What is a controlled component?
A form input element controlled by React via state.

React Hooks

20. What are React Hooks?
Functions that let you use state and lifecycle features in functional components.

21. Name some common React Hooks.

• useState
• useEffect
• useContext
• useRef
• useReducer
• useMemo
• useCallback

22. What is useState?
A hook that adds state to functional components.

23. What is useEffect?
A hook for performing side effects (API calls, subscriptions, DOM updates).

24. What is the difference between useEffect and componentDidMount?
useEffect runs after every render (unless dependencies are provided).
componentDidMount runs once after initial render (class components).

 

25. What is useContext?
Hook to consume context values without Consumer.
 

26. What is useRef?
A hook that returns a mutable object for persisting values across renders (like DOM references).

27. What is useReducer?
Hook for complex state management using reducer functions.

28. What is useMemo?
Memoizes a computed value to avoid unnecessary recalculations.

29. What is useCallback?
Memoizes a function to prevent unnecessary re-creations.

30. What is a custom hook?
A reusable function starting with use that encapsulates hook logic.

31. When should you use useMemo vs useCallback?

• useMemo: Memoize values.
• useCallback: Memoize functions.

32. What is dependency array in useEffect?
Determines when the effect runs. Empty array = only once.

33. What happens if you don’t provide dependency array?
The effect runs after every render.

34. What happens if dependency array is empty?
The effect runs only once (like componentDidMount).

35. Can you use Hooks inside loops or conditions?
No, hooks must run in the same order on every render.

36. What are the rules of hooks?

• Call hooks only at the top level.
• Call hooks only in React functions.

37. What is the difference between useEffect and useLayoutEffect?

• useEffect: Runs asynchronously after paint.
• useLayoutEffect: Runs synchronously before paint.

38. What is useImperativeHandle?
Customizes the instance value exposed when using ref.

39. Can you use multiple useEffect hooks in one component?
Yes, effects can be split logically into multiple hooks.

40. What are the components in React?
Independent, reusable pieces of UI. Types: Functional & Class components.

Advanced Concepts
 

41. What is a higher-order component (HOC)?
A function that takes a component and returns a new component with additional props/logic.

42. What is the render props pattern?
A technique where a function is passed as a prop to control rendering.

43. What is React Context API?
Provides a way to share state globally without prop drilling.

44. What are controlled vs uncontrolled components?

• Controlled: Value controlled by React state.
• Uncontrolled: Managed by DOM (via refs).

45. What is React Router?
A library for client-side routing in React apps.

46. What is the difference between BrowserRouter and HashRouter?

• BrowserRouter: Uses HTML5 history API.
• HashRouter: Uses URL hash (#).

47. What is lazy loading in React?
Loading components only when needed using React.lazy and Suspense.

48. What is code splitting in React?
Splitting app into bundles to load only required code.

49. What is Redux?
A state management library with a single store and unidirectional data flow.

50. What are Redux principles?

• Single source of truth
• State is read-only
• Changes via pure functions (reducers)

51. What is the difference between Redux and Context API?

• Redux: Better for complex apps with middleware, debugging, and devtools.
• Context: Simpler, but not great for large state management.

52. What are reducers in Redux?
Pure functions that take state + action → return new state.

53. What is middleware in Redux?
Functions that intercept actions before reaching reducers (e.g., Redux Thunk, Saga).

54. What is Redux Thunk?
Middleware for async actions.

55. What is Redux Saga?
Middleware for handling async actions with generators.

56. What is React Fiber?
A new reconciliation algorithm was introduced in React 16 for async rendering.

57. What is concurrent mode in React?
Allows React to interrupt rendering and prioritize updates.

58. What is hydration in React?
The process of attaching event listeners to server-rendered HTML.

59. What is SSR (Server-Side Rendering)?
Rendering React components on the server for better performance & SEO.

60. What is CSR (Client-Side Rendering)?
Rendering React components in the browser.

61. What is the difference between SSR and CSR?

• SSR: Faster first load, better SEO.
• CSR: Faster navigation, heavier initial load.

62. What is Next.js?
A React framework for SSR, routing, API handling, and optimizations.

63. What is the difference between useEffect and componentWillUnmount?
useEffect cleanup function mimics componentWillUnmount.

64. What is React.StrictMode?
A wrapper that activates extra checks/warnings for its children.

65. What are portals in React?
Allow rendering children into a DOM node outside the parent hierarchy.

66. What is an error boundary?
A component that catches errors in its child component tree.

67. What is forwardRef?
Passes refs from parent to child components.

68. What is prop drilling?
Passing props through multiple nested components unnecessarily.

69. How to avoid prop drilling?

• Context API
• Redux / Zustand / Recoil

70. What are synthetic events in React?
Wrapper around native events for cross-browser compatibility.

71. How to optimize React app performance?

• Memoization (React.memo, useMemo, useCallback)
• Code splitting
• Lazy loading
• Virtualization
• Avoid unnecessary re-renders

72. What is React.memo?
A HOC that prevents re-renders if props haven’t changed.

73. Difference between React.memo and useMemo?

• React.memo: Memoizes components.
• useMemo: Memoizes values.

74. What is windowing or list virtualization?
Rendering only visible list items (e.g., react-window, react-virtualized).

75. What is tree shaking?
Removing unused code during bundling.

76. How to prevent unnecessary re-renders?

• PureComponent
• React.memo
• useCallback
• Key usage in lists

77. What is debouncing in React?
Delaying function execution until a pause in input (e.g., search input).

78. What is throttling?
Limiting function execution to once every interval.

79. Difference between useMemo and useRef for caching?

• useMemo: For recalculating values.
• useRef: For persisting mutable values.

80. What is hydration mismatch in React?
When server-rendered markup doesn’t match client-rendered DOM.

81. What is bundle splitting?
Splitting JS bundle into smaller chunks.

82. What is code reusability in React?
Using HOCs, hooks, and render props.

83. What is reconciliation optimization?
Using keys, memoization, and avoiding inline functions.

84. What is dynamic import in React?
Importing modules only when needed using import().

85. What is profiling in React?
Measuring rendering performance using React Profiler API.

86. What is Flux?
An architecture for unidirectional data flow (basis of Redux).

87. What is the difference between Redux and MobX?

• Redux: Strict, predictable, boilerplate-heavy.
• MobX: Simpler, reactive, mutable state.

88. What is Recoil?
State management library for React with atoms/selectors.

89. What is Zustand?
Lightweight state management library using hooks.

90. What is Jotai?
Primitive and flexible state management library.

91. What are React DevTools?
Browser extensions for debugging React apps.

92. What is suspense in React?
For handling asynchronous rendering (e.g., lazy loading).

93. What is the difference between React Native and React?

• React: Web UIs.
• React Native: Mobile UIs (iOS/Android).

94. What is hydration in Next.js?
The process of converting static HTML to a live React app.

95. What is the difference between CSR, SSR, and SSG?

• CSR: Client renders everything.
• SSR: Server renders pages at request.
• SSG: Pre-renders at build time.

96. What is static site generation (SSG)?
Building static HTML at compile time (e.g., Next.js getStaticProps).

97. What is incremental static regeneration (ISR)?
Next.js feature to regenerate static pages on demand.

98. What is the difference between Next.js and CRA?

• CRA: Client-side only.
• Next.js: SSR + SSG + API routes.

99. What is the hydration warning in React 18?
Mismatch between server-rendered HTML and client React tree.

100. What’s new in React 18?

• Automatic batching
• Concurrent rendering
• useId hook
• startTransition API

Do visit our channel to learn more: SevenMentor

Author: -

Ambarish Durani