React Interview Question Bank: Junior to Senior Level

A comprehensive collection of React interview questions organized by experience level and difficulty. These questions cover fundamentals, hooks, components, state management, performance optimization, architecture patterns, and more.

Junior Level Questions

Fundamentals (Easy)

1. What is React and what are its main features?
2. Explain the difference between a library and a framework. Where does React fit in?
3. What is JSX and how does it work?
4. What is the Virtual DOM and why is it important?
5. How does React differ from vanilla JavaScript?
6. What are props in React?
7. What is state in React?
8. Explain the difference between props and state.
9. What is the significance of keys in React lists?
10. What is the default direction of data flow in React?

Components (Easy)

11. What are React components?
12. What's the difference between functional and class components?
13. What are pure components?
14. What is the difference between a controlled and an uncontrolled component?
15. When would you use a class component over a functional component?
16. What is prop drilling and why can it be problematic?
17. What is a higher-order component (HOC)?
18. What are React fragments and why are they useful?
19. How do you create a ref in React?
20. What is the purpose of the key prop when rendering a list of components?

Hooks (Easy)

21. What are React hooks and why were they introduced?
22. Explain the useState hook with an example.
23. What does the useEffect hook do?
24. How do you skip effects on certain renders using useEffect?
25. What are the rules of hooks?
26. What is the useContext hook used for?
27. How do you create a custom hook?
28. What is the useRef hook and what's a common use case?
29. How is useState different from this.setState in class components?
30. What problems do hooks solve that couldn't be solved with class components?

Practical Implementation (Easy-Medium)

31. Implement a simple counter component using useState.
32. Create a toggle button that changes its text between "ON" and "OFF".
33. How would you fetch data from an API in a functional component?
34. Implement a basic form with form validation using React hooks.
35. Create a component that displays a list of items from props.
36. How would you conditionally render content in React?
37. Implement dark mode toggling in a simple app using React.
38. Create a component that displays the window size and updates when resized.
39. Implement a simple todo list that allows adding and removing items.
40. Create a component that filters a list based on a search input.

Mid-Level Questions

Advanced Hooks (Medium)

41. Explain the useReducer hook and when you would use it over useState.
42. What is useCallback and why is it useful?
43. How does useMemo work and when should you use it?
44. What's the difference between useCallback and useMemo?
45. How would you implement a custom hook for form handling?
46. What is useLayoutEffect and how does it differ from useEffect?
47. Explain how to use useContext with useReducer to manage global state.
48. How would you implement a debounce function using hooks?
49. What are the performance implications of using many context providers?
50. How would you implement a custom useLocalStorage hook?

Performance (Medium)

51. What is React.memo and when should you use it?
52. Explain how to optimize re-renders in functional components.
53. What causes unnecessary re-renders in React and how can you prevent them?
54. What is code splitting in React and how does it improve performance?
55. How would you optimize a React application that renders large lists?
56. What is lazy loading in React and how does it work?
57. How do you profile and measure performance in a React application?
58. What are common performance pitfalls in React applications?
59. Explain the concept of "lift state up" and its performance implications.
60. How do you prevent memory leaks in React components?

State Management (Medium)

61. Compare React Context API and Redux for state management.
62. When would you use Context API versus a state management library?
63. Explain the concept of actions, reducers, and the store in Redux.
64. What is Redux Toolkit and how does it simplify Redux usage?
65. What are side effects in Redux and how are they typically handled?
66. When would you use Zustand over Redux?
67. How would you structure a global state for a medium-sized application?
68. What are the common pitfalls when using Context API for state management?
69. How would you handle asynchronous operations in Redux?
70. Compare different state management approaches: Redux, Context API, MobX, and Zustand.

Testing (Medium)

71. What is Jest and React Testing Library? How do they work together?
72. How do you test a React component with hooks?
73. What is the difference between shallow rendering and full rendering in tests?
74. How do you mock API calls in React component tests?
75. How do you test components that use Context API?
76. What is snapshot testing and when should you use it?
77. How do you test user interactions like clicking or form submissions?
78. Explain how to test asynchronous operations in React components.
79. What are common testing patterns for React applications?
80. How do you set up test coverage for a React application?

Practical Implementation (Medium)

81. Implement a custom hook that handles API calls with loading, error, and data states.
82. Create a form with multiple steps (wizard) in React.
83. Implement a datepicker component from scratch.
84. Create a responsive image gallery with modal previews.
85. Implement a dropdown menu with keyboard navigation.
86. Create a custom hook for handling infinite scrolling.
87. Implement a form with dynamic fields that can be added or removed.
88. Create a custom drag and drop interface without external libraries.
89. Implement a component that efficiently renders a large table with sorting and filtering.
90. Build a custom autocomplete component that fetches suggestions from an API.

Senior Level Questions

Architecture (Hard)

91. How would you architect a large-scale React application with multiple teams?
92. What are micro-frontends and how might you implement them with React?
93. How do you manage code sharing between React applications?
94. Explain how you would implement a design system in a React application.
95. What strategies would you use to optimize the build size of a React application?
96. How would you handle authentication and authorization in a React application?
97. Describe your approach to error handling in a complex React application.
98. How would you implement internationalization in a React application?
99. What are your strategies for maintaining code quality in a large React codebase?
100. How would you architect a mono-repo containing multiple React applications?

Advanced Patterns (Hard)

101. Explain the compound component pattern with an example.
102. What is the render props pattern and when would you use it?
103. Explain the state reducer pattern in React.
104. How does the provider pattern work and when should it be used?
105. What is the container/presentational pattern and why is it useful?
106. Explain the custom hook composition pattern.
107. What is the controlled props pattern?
108. Explain how the observer pattern can be implemented in React.
109. What is the component composition pattern?
110. How and when would you implement the context module functions pattern?

Performance Optimization (Hard)

111. How would you identify and resolve rendering performance issues in a React application?
112. Explain strategies for optimizing initial load time in a React application.
113. How would you implement effective code splitting in a complex React application?
114. What techniques would you use to optimize React Context performance?
115. How would you handle virtualization for very large lists in React?
116. Explain how you would optimize images and assets in a React application.
117. What strategies would you implement for efficient data fetching in React?
118. How would you optimize Redux store for a large-scale application?
119. Explain techniques for reducing JS bundle size in a React application.
120. How would you implement efficient real-time updates in a React application?

State Management (Hard)

121. Design a state management solution for a complex form with interdependent fields.
122. How would you implement optimistic updates with error handling in a React application?
123. Design a state management architecture for an application with real-time collaborative features.
124. How would you handle caching and state normalization in a complex React application?
125. What approaches would you take to handle derived state efficiently?
126. Explain how you would implement an undo/redo feature in a React application.
127. How would you structure application state for offline-first capabilities?
128. Design a state management approach for a multi-tenant application.
129. How would you implement state persistence across sessions with proper security?
130. Design a state management architecture that synchronizes with a backend service.

System Design (Hard)

131. Design a real-time dashboard that displays data from multiple sources.
132. How would you design a collaborative document editing system in React?
133. Design a large-scale e-commerce product catalog with filtering and search capabilities.
134. How would you architect a social media feed with infinite scrolling and real-time updates?
135. Design a file upload system with progress tracking and resumable uploads.
136. How would you implement a complex multi-step checkout process?
137. Design a video streaming application with React.
138. How would you build a design tool similar to Figma or Canva using React?
139. Design a system for a multi-user calendar application.
140. How would you architect a code-sharing application like CodePen?

Team Leadership (Hard)

141. How do you handle technical debt in a React codebase?
142. What strategies would you use to onboard new developers to a complex React codebase?
143. How would you guide junior developers in writing maintainable React components?
144. What's your approach to implementing new React features or patterns in an existing codebase?
145. How would you make technical decisions on adopting new React libraries or patterns?
146. What's your strategy for keeping a team updated with the latest React best practices?
147. How would you structure code reviews for React components?
148. What metrics would you track to measure the quality of a React codebase?
149. How would you handle disagreements within a team about React architecture decisions?
150. What's your approach to balancing feature development with maintaining React code quality?

Answer Hints

Junior Level Hints

1. React is a JavaScript library for building user interfaces, with features like Virtual DOM, component-based architecture, and unidirectional data flow.

2. Libraries provide specific functionality to be called by your code, while frameworks call your code. React is a library.

3. JSX is a syntax extension for JavaScript that looks like HTML. It's transformed to React.createElement() calls.

4. Virtual DOM is a lightweight copy of the actual DOM that React uses to optimize rendering performance through diffing.

5. React uses a component-based approach and Virtual DOM, while vanilla JS directly manipulates the DOM.

6. Props are read-only data passed from parent to child components.

7. State is internal data managed by a component that can change over time.

8. Props are passed from parent components and are read-only, while state is managed within the component and mutable.

9. Keys help React identify which items have changed, been added, or removed, improving reconciliation performance.

10. Data flows down from parent to child components (unidirectional).

11. Components are reusable, self-contained pieces of UI.

12. Functional components are JavaScript functions that accept props and return elements. Class components extend React.Component and have more built-in features.

13. Pure components implement shouldComponentUpdate with a shallow prop and state comparison to prevent unnecessary renders.

14. Controlled components are managed by React state, while uncontrolled components maintain their own state in the DOM.

15. Class components were needed for state and lifecycle methods before hooks, or when using error boundaries.

16. Prop drilling is passing props through many components that don't need them, making code harder to maintain.

17. HOCs are functions that take a component and return a new enhanced component.

18. Fragments let you group elements without adding extra nodes to the DOM.

19. Create refs using createRef() (class) or useRef() (functional).

20. Keys identify elements in lists, helping React optimize rendering.

21. Hooks let functional components use state and lifecycle features, promoting code reuse.

22. useState returns current state and a setter function, e.g., const [count, setCount] = useState(0).

23. useEffect runs side effects after renders, handling lifecycle events like componentDidMount/Update/Unmount.

24. Use dependency arrays in useEffect - empty array ([]) for once after mount, specified dependencies for conditional runs.

25. Only call hooks at the top level and in React functions, not in conditions or loops.

26. useContext consumes values from React Context without nested render props or HOCs.

27. Custom hooks are functions starting with "use" that can call other hooks.

28. useRef persists values between renders without causing re-renders; common for DOM element references.

29. useState returns a current value and setter, while this.setState merges state updates and handles asynchronous updates.

30. Hooks allow reusing stateful logic between components, avoid class confusion, and group related code.

31-40. These questions require implementing specific React components, focusing on basic state management, event handling, conditional rendering, and common UI patterns.

Mid-Level Hints

41. useReducer handles complex state logic through actions and reducers, similar to Redux.

42. useCallback memoizes functions to prevent unnecessary recreation between renders.

43. useMemo memoizes computed values to prevent recalculation on every render.

44. useCallback returns a memoized function, while useMemo returns a memoized value.

45. Custom form hooks typically manage form state, validation, and submission handling.

46. useLayoutEffect runs synchronously after DOM mutations but before browser painting, while useEffect runs asynchronously after painting.

47. Combine useContext and useReducer by creating a context with a reducer, providing dispatch and state.

48. Implement debounce with useCallback, useState, and useEffect to manage timers.

49. Multiple context providers can cause performance issues due to separate re-render cascades.

50. useLocalStorage hook would use useState with localStorage for persistence.

51. React.memo prevents re-renders when props haven't changed, useful for optimizing pure functional components.

52. Optimize with memoization (React.memo, useMemo, useCallback) and proper component structure.

53. Unnecessary re-renders happen when parents re-render, state changes, or reference equality breaks for objects/functions.

54. Code splitting breaks code into smaller chunks loaded on demand, improving initial load time.

55. Virtualize large lists to render only visible items using libraries like react-window.

56. Lazy loading defers loading components until needed using React.lazy and Suspense.

57. Use React DevTools Profiler, Lighthouse, or custom measurements for performance profiling.

58. Common pitfalls include unnecessary re-renders, inefficient state updates, and large component trees.

59. "Lifting state up" moves state to common ancestors, potentially causing cascading re-renders.

60. Clean up subscriptions, timers, and event listeners in useEffect return functions.

61. Context API is built into React but simple; Redux provides a more structured approach with middleware support.

62. Use Context for low-frequency updates and theme/auth data; use Redux for complex state with many updates.

63. Actions describe state changes, reducers implement them, and the store holds the global state.

64. Redux Toolkit reduces boilerplate with createSlice, includes Redux Thunk, and uses Immer for immutability.

65. Side effects (API calls, etc.) are typically handled with middleware like thunk or saga.

66. Zustand is simpler, has less boilerplate, and better performance for many scenarios.

67. Organize by domain, normalize data, separate UI from domain state, and keep state minimal.

68. Context causes re-renders of all consumers when value changes and lacks middleware support.

69. Use middleware like thunk or saga to handle async operations in Redux.

70. Compare based on boilerplate, performance, debugging, team familiarity, and application needs.

71. Jest is a test runner; React Testing Library focuses on testing from a user perspective.

72. Test hooks through the components that use them or with the React Hooks Testing Library.

73. Shallow renders just the component; full rendering includes child components.

74. Mock API calls using jest.mock() or a library like MSW (Mock Service Worker).

75. Wrap components with the appropriate Context Provider in tests.

76. Snapshot testing captures component output for regression testing but can be brittle.

77. Use fireEvent or userEvent from Testing Library to simulate interactions.

78. Use async/await with waitFor or findBy queries to test asynchronous operations.

79. Common patterns include AAA (Arrange-Act-Assert), component testing, and integration testing.

80. Configure Jest with coverage reporters and threshold requirements.

81-90. These questions require implementing more complex React components and custom hooks, focusing on real-world scenarios.

Senior Level Hints

91. Focus on modular architecture, shared libraries, clear boundaries, state management strategy, and documentation.

92. Micro-frontends split applications into smaller, independently deployable frontend apps, using approaches like iframes, web components, or module federation.

93. Options include shared npm packages, mono-repos, and module federation.

94. Implement a design system with component libraries, styling systems, documentation, and versioning strategies.

95. Apply code splitting, tree shaking, dynamic imports, and proper dependency management.

96. Consider JWT, OAuth, role-based access control, and secure state management.

97. Use error boundaries, global error handlers, consistent error states, and monitoring.

98. Use libraries like i18next, manage translations, handle locale-specific formatting, and consider RTL support.

99. Implement linting, testing, code reviews, documentation, and architecture decisions records.

100. Use tools like Nx, Lerna, or Turborepo with shared configurations, libraries, and CI/CD pipelines.

101. Compound components share state implicitly through context, like select/option or tabs/tab-panel.

102. Render props pass rendering logic via a function prop, enabling component composition.

103. State reducer pattern allows consumers to control state updates by providing a custom reducer.

104. Provider pattern uses context to provide state/functions to deeply nested components.

105. Container components handle data/logic; presentational components handle rendering/UI.

106. Custom hook composition combines multiple hooks into more complex ones.

107. Controlled props enable parent components to control child component state.

108. Observer pattern uses subscriptions to notify components of state changes.

109. Component composition builds complex UIs from simpler components, favoring composition over inheritance.

110. Context module functions expose functions that operate on context state, keeping logic in one place.

111. Identify with React DevTools Profiler, fix with memoization, code splitting, and better component structure.

112. Optimize with server-side rendering, code splitting, lazy loading, and proper bundling.

113. Implement route-based, component-based, and feature-based code splitting.

114. Split contexts by update frequency, memoize provider values, and keep context consumers small.

115. Use virtualization libraries with proper configuration for variable heights and cacheing.

116. Optimize with lazy loading, proper sizing, next-gen formats, and image CDNs.

117. Implement data fetching libraries, request deduplication, caching, and optimistic updates.

118. Use normalization, selectors, batched actions, and consider Redux Toolkit.

119. Apply tree shaking, dynamic imports, dependency optimization, and proper bundling.

120. Implement WebSockets or long polling with proper state updates and error handling.

121. Combine useReducer with field-level validation, dependent field logic, and optimized re-renders.

122. Update UI optimistically, store previous state, revert on error, and retry mechanisms.

123. Implement real-time sync with WebSockets, conflict resolution, and offline capabilities.

124. Use normalized state with libraries like normalizr, implement proper cache invalidation, and use selectors.

125. Use memoization, compute derived state on-demand, and consider libraries like Reselect.

126. Implement command pattern with action history and state snapshots.

127. Use IndexedDB or localStorage with sync mechanisms and conflict resolution.

128. Implement tenant isolation, shared vs. tenant-specific state, and proper security.

129. Use secure storage (HttpOnly cookies, encryption), sanitize on load, and handle migrations.

130. Design bidirectional sync with optimistic updates, conflict resolution, and offline support.

131-140. These questions test your ability to design complex React applications for specific domains.

141-150. These questions assess leadership and technical decision-making in React projects.