Top 100 React.js Interview Questions and Answers

1. What is React?
   React is a JavaScript library for building user interfaces, mainly used for creating single-page applications with a component-based architecture.
   
2. What are the key features of React?
   
   • Component-based architecture
     
   • Virtual DOM
     
   • Unidirectional data flow
     
   • Reusable components
     
   • JSX syntax
     
3. What is JSX?
   JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code inside JavaScript.
   
4. Why use React instead of plain JavaScript?
   React simplifies UI building with reusable components, improves performance with the Virtual DOM, and ensures predictable state management.
   
5. What are components in React?
   Components are reusable, self-contained pieces of UI. They can be functional or class-based.
   
6. What is the difference between functional and class components?
   
   • Functional components: Use functions, rely on Hooks for state and lifecycle.
     
   • Class components: Use ES6 classes, have lifecycle methods and state.
     
7. What is the Virtual DOM?
   A lightweight copy of the real DOM. React updates the Virtual DOM first, then compares it with the previous version (diffing), and only updates the real DOM where necessary.
   
8. What are props in React?
   Props (properties) are used to pass data from parent to child components. They are read-only.
   
9. What is state in React?
   State is a built-in object in React that stores component data and controls how components render and behave.
   
10. What is the difference between state and props?
    

• Props: Passed from parent, immutable.
  
• State: Managed inside the component, mutable.
  

11. What are React lifecycle methods?
    Special methods in class components that run at different stages: mounting, updating, and unmounting.
    
12. What are the lifecycle phases?
    

• Mounting (constructor, render, componentDidMount)
  
• Updating (shouldComponentUpdate, render, componentDidUpdate)
  
• Unmounting (componentWillUnmount)
  

13. What replaces lifecycle methods in functional components?
    React Hooks like useEffect.
    
14. When is componentDidMount() used?
    Runs after the component is mounted; useful for API calls or subscriptions.
    
15. When is componentWillUnmount() used?
    Runs before a component is removed; used for cleanup like removing event listeners.
    

16. What are React Hooks?
    Functions that allow functional components to use state and lifecycle features.
    
17. What are the most used Hooks?
    

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

18. What is useState?
    Hook to declare state variables in functional components.
    
19. What is useEffect?
    Hook to handle side effects (API calls, DOM manipulation, subscriptions).
    
20. Difference between useEffect and lifecycle methods?
    useEffect combines componentDidMount, componentDidUpdate, and componentWillUnmount.
    
21. What is useContext?
    Hook that provides access to context data without using props drilling.
    
22. What is useReducer?
    Alternative to useState for complex state logic. Works like Redux reducer.
    
23. What is useRef?
    Hook that creates mutable references that don’t trigger re-renders (used for accessing DOM nodes).
    
24. What is useMemo?
    Hook for memoizing values to avoid unnecessary recalculations.
    
25. What is useCallback?
    Hook for memoizing functions to prevent unnecessary re-renders.
    

26. What is React Fiber?
    A reimplementation of React’s reconciliation algorithm for better UI rendering.
    
27. What is reconciliation in React?
    The process of updating the DOM by comparing the new Virtual DOM with the previous one.
    
28. What is keys in React lists?
    Keys help React identify elements when rendering lists. They should be unique and stable.
    
29. What is lifting state up?
    Moving state to a common ancestor to share data between child components.
    
30. What is controlled vs uncontrolled components?
    

• Controlled: Form data is handled by React state.
  
• Uncontrolled: Form data handled by the DOM using ref.
  

31. What is React Fragments?
    <React.Fragment> lets you return multiple elements without adding extra DOM nodes.
    
32. What is React Portal?
    A way to render children into a DOM node outside the parent hierarchy.
    
33. What is error boundary?
    Special component that catches JavaScript errors in child components.
    
34. What is code splitting in React?
    Breaking code into smaller bundles to improve performance, often using React.lazy and Suspense.
    
35. What is lazy loading in React?
    Dynamically loading components only when needed.
    

36. What is Redux?
    A state management library based on a single store and predictable state updates.
    
37. Core principles of Redux?
    

• Single source of truth
  
• State is read-only
  
• Pure reducers handle state changes
  

38. What are reducers in Redux?
    Pure functions that take current state and action, return new state.
    
39. What are actions in Redux?
    Plain JavaScript objects describing what to do (type + payload).
    
40. What is Redux middleware?
    Functions that run between dispatching an action and reaching the reducer.
    
41. What is Redux Thunk?
    Middleware for handling async actions.
    
42. Difference between Redux and Context API?
    

• Redux: Better for large apps, middleware, debugging.
  
• Context API: Lightweight, suitable for small/medium apps.
  

43. What is the Redux store?
    Central place that holds the entire app state.
    
44. How to connect React with Redux?
    Using react-redux with Provider, useSelector, and useDispatch.
    
45. What is the difference between useSelector and useDispatch?
    

• useSelector: Read state from store.
  
• useDispatch: Dispatch actions to update store.
  

46. How to optimize React performance?
    

• Memoization (React.memo, useMemo, useCallback)
  
• Code splitting
  
• Avoid anonymous functions in render
  
• Virtualization (e.g., react-window)
  
• Using keys properly
  

47. What is React.memo?
    Higher-order component that memoizes functional components to avoid unnecessary re-renders.
    
48. What is shouldComponentUpdate()?
    Lifecycle method in class components to prevent unnecessary re-renders.
    
49. What is useTransition in React 18?
    Hook for handling concurrent UI updates smoothly.
    
50. What is suspense in React?
    Allows components to wait for async data before rendering.
    

51. What is React Router?
    A library for handling routing in React applications.
    
52. Difference between BrowserRouter and HashRouter?
    

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

53. What are Route and Switch?
    

• Route: Renders a component for a path.
  
• Switch: Renders only the first matching route.
  

54. What is useNavigate in React Router v6?
    Hook to navigate programmatically.
    
55. What is dynamic routing?
    Creating routes based on dynamic parameters (e.g., /user/:id).
    

56. What is Jest?
    A JavaScript testing framework for unit tests.
    
57. What is React Testing Library (RTL)?
    A testing library focused on testing React components from a user perspective.
    
58. Difference between shallow and mount in Enzyme?
    

• Shallow: Renders component without children.
  
• Mount: Renders full DOM including children.
  

59. How to test asynchronous code in React?
    Using async/await with waitFor in RTL.
    
60. How to test React hooks?
    Use @testing-library/react-hooks or test components that use hooks.
    

61. What is Concurrent Rendering?
    React can interrupt rendering for better UI responsiveness.
    
62. What is useDeferredValue?
    Hook for deferring expensive calculations while keeping UI responsive.
    
63. What is automatic batching in React 18?
    Groups multiple state updates into one re-render automatically.
    
64. What is Server Components in React?
    Components rendered on the server to reduce client-side JavaScript.
    
65. What is streaming SSR in React 18?
    Server-side rendering that streams HTML progressively.
    

66. What is Flux architecture?
    Pattern where data flows in a single direction via actions, dispatcher, store, and views.
    
67. What is the difference between React and Angular?
    

• React: Library, virtual DOM, flexible.
  
• Angular: Framework, two-way data binding, opinionated.
  

68. What is the difference between React and Vue?
    

• React: Uses JSX, flexible ecosystem.
  
• Vue: Template-based, simpler learning curve.
  

69. What are higher-order components (HOC)?
    Functions that take a component and return an enhanced component.
    
70. What are render props?
    A technique where a component’s children is a function that controls rendering.
    
71. What is prop drilling?
    Passing props through multiple levels of components unnecessarily.
    
72. What is the solution for prop drilling?
    Context API or Redux.
    
73. What is hydration in React?
    Attaching event listeners to server-rendered HTML on the client side.
    
74. What is React Native?
    Framework for building mobile apps using React.
    
75. What is difference between CSR and SSR?
    

• CSR: Rendering happens in the browser.
  
• SSR: Rendering happens on the server.
  

76. How can you style components in React?
    

• Inline styles
  
• CSS stylesheets
  
• CSS Modules
  
• Styled-components (CSS-in-JS)
  
• Tailwind CSS or other utility libraries
  

77. What are CSS Modules in React?
    A way to scope CSS locally to components, avoiding global class conflicts.
    
78. What are styled-components?
    A CSS-in-JS library allowing you to write CSS inside JavaScript using template literals.
    
79. Difference between inline styles and CSS Modules?
    

• Inline styles: Written directly in JSX.
  
• CSS Modules: Written in .module.css files, scoped locally.
  

80. Can React work without CSS?
    Yes, React only manages UI logic. Styling is optional, but usually CSS (or CSS-in-JS) is used.
    
81. How to handle forms in React?
    

• Controlled components (with state)
  
• Uncontrolled components (with ref)
  

82. What is two-way data binding in React?
    React does not have two-way binding by default. Instead, controlled components achieve similar results by updating state on input changes.
    
83. How to validate forms in React?
    

• Custom validation with state
  
• Libraries like Formik or React Hook Form
  

84. What is synthetic event in React?
    A wrapper around browser events that works the same across different browsers.
    
85. How to handle multiple inputs in React forms?
    Use name attributes and update state dynamically with [e.target.name]: e.target.value.

86. What is Next.js?
    A React framework for server-side rendering, static site generation, and routing.
    
87. What is Gatsby.js?
    A React framework for building static websites with GraphQL.
    
88. What is React Query?
    A library for fetching, caching, and synchronizing server state in React.
    
89. What is Recoil in React?
    A state management library for managing global state with atoms and selectors.
    
90. What is React DevTools?
    A browser extension for debugging React components, props, and state.
    

91. How do you build a React app for production?
    Using npm run build or yarn build which creates optimized static files.
    
92. How to deploy a React app?
    

• Netlify
  
• Vercel
  
• GitHub Pages
  
• AWS, Azure, or Firebase hosting
  

93. What is tree shaking in React?
    Process of removing unused code from the final bundle.
    
94. What is source maps in React?
    Files that map minified code to original source code for debugging.
    
95. What are environment variables in React?
    Variables like API keys stored in .env files, accessed via process.env.
    

96. How to prevent XSS (Cross-Site Scripting) in React?
    React escapes content by default. For raw HTML, use dangerouslySetInnerHTML carefully.
    
97. What is dangerouslySetInnerHTML?
    A React prop that lets you set HTML directly into the DOM. It must be sanitized to avoid XSS.
    
98. How to secure API keys in React apps?
    Do not expose keys in frontend. Use backend proxy or serverless functions.
    
99. What is CSRF and how to prevent it in React apps?
    Cross-Site Request Forgery; prevent using CSRF tokens and same-site cookies.
    
100. What are best security practices in React?
     

• Escape data properly
  
• Use HTTPS
  
• Avoid inline scripts
  
• Use authentication & authorization properly
  
• Regular dependency updates