Looking for React interview questions? You’ve reached the right place!
React (also known as React.js or ReactJS) is a declarative, reactive, open-source front-end Java Script library developed by Facebook in 2011. If you are a front-end developer involved in web development to build interactive elements on a website then React is a must-have skill in your tech kitty. You can use React to create large animated and moving web applications without having to load the page. There are numerous advantages React offers over other front-end technologies, such as:
- Easy to learn
- Has a native approach
- Data binding
- Easy testability
To prepare extensively and crack any interview, here are more than 200 React interview questions to help you:
Q1. What is React?
Q2. Describe the main features of React.
Q3. Explain what is JSX?
Q4. How does an Element differ from Component?
Q5. How do you create components in React?
Q6. When should you use a Class Component over a Function Component?
Q7. What are Pure Components?
Q8. What is state in React?
Q9. What are props in React?
Q10. How is state different from props?
Q11. Why should we not update the state directly?
Q12. What is the purpose of callback function as an argument of setState()?
Q13. What is the difference between HTML and React event handling?
Q14. How do you bind methods or event handlers in JSX callbacks?
Q15. How do you pass a parameter to an event handler or callback?
Q16. What are synthetic events in React?
Q17. What are inline conditional expressions?
Q18. Discuss “key” prop and what is the benefit of using it in arrays of elements?
Q19 Explain the use of refs?
Q20 How to create refs?
Q21. What are forward refs?
Q22. Which is preferred option with in callback refs and findDOMNode()?
Q23. Why are String Refs legacy?
Q24. What is Virtual DOM and how do they work?
Q25. What’s the difference between Virtual DOM and Shadow DOM?
Q26. What is React Fiber and what’s its main use?
Q27. What are controlled and uncontrolled components?
Q28. Why can’t browsers read JSX?
Q29. How is React different from Angular?
Q30. How React’s ES6 syntax is different from ES5 syntax?
Q31. Tell the difference between createElement and cloneElement?
Q32. What is Lifting State Up in React?
Q33. What are the different phases of component lifecycle?
Q34. What are the lifecycle methods of React?
Q35. What are Higher-Order components?
Q36. How do you create props proxy for HOC component?
Q37. What is context?
Q38. What do you mean by children prop?
Q39. How do you write comments in React?
Q40. What is the purpose of using super constructor with props argument?
Q41. What is reconciliation?
Q42. How do you set state with a dynamic key name?
Q43. What would be the common mistake of function being called every time the component renders?
Q44. Is lazy function supports named exports?
Q45. Why React uses className over class attribute?
Q46. What are fragments?
Q47. Why fragments are better than container divs?
Q48. What are portals in React?
Q49. What are stateless components?
Q50. What are stateful components? How do they differ from stateless components?
Q51. How do you apply validation on props in React?
Q52. What are the benefits of React?
Q53. What are the limitations of React?
Q54. What are error boundaries in React v16?
Q55. How error boundaries handled in React v15?
Q56. What are the recommended ways for static type checking?
Q57. What’s the purpose of react-dom package?
Q58. What’s the use of render method of react-dom?
Q59. What is ReactDOMServer?
Q60. How to use InnerHtml in React?
Q61. How to use styles in React?
Q62. How events are different in React?
Q63. What happens when you use setState in constructor?
Q64. What is the impact of indexes as keys?
Q65. Is it recommended to use setState() in componentWillMount() method?
Q66. What happens when you use props in initial state?
Q67. How do you conditionally render components?
Q68. Why we have to be careful when spreading props on DOM elements??
Q69. How to use decorators in React?
Q70. How to memoize a component?
Q71. How do you implement Server-Side Rendering or SSR?
Q72. How do you enable production mode in React?
Q73. What is CRA and its benefits?
Q74. What is the lifecycle methods order in mounting?
Q75. What are the lifecycle methods going to be deprecated in React v16?
Q76. What’s the use of getDerivedStateFromProps() lifecycle method?
Q77. What’s the use of getSnapshotBeforeUpdate() lifecycle method?
Q78. Do Hooks replace render props and higher order components?
Q79. What is the recommended way for naming components?
Q80. What is the recommended ordering of methods in component class?
Q81. What is a switching component?
Q82. Why do we need to pass a function to setState()?
Q83. What is strict mode in React?
Q84. Explain whart React Mixins?
Q85. Why is isMounted() an anti-pattern and what is the proper solution?
Q86. What are the Pointer Events supported in React?
Q87. Why should component names start with capital letter?
Q88. Are custom DOM attributes supported in React v16?
Q89. How does a constructor differ from getInitialState?
Q90. Is it possible to force a component to re-render without calling setState?
Q91. What is the difference between super() and super(props) in React using ES6 classes?
Q92. How do you loop inside JSX?
Q93. How do you access props in attribute quotes?
Q94. What is React PropType array with shape?
Q95. How to conditionally apply class attributes?
Q96. What is the difference between React and ReactDOM?
Q97. Why ReactDOM is separated from React?
Q98. How do you use React label element?
Q99. How do you combine multiple inline style objects?
Q100. How do you re-render the view when the browser is resized?
Q101. Explain the difference between setState and replaceState methods?
Q102. How to listen to state changes?
Q103. What is the suggested approach of removing an array element in react state?
Q104. Can you use React without rendering HTML?
Q105. How to pretty print JSON with React?
Q106. Why you can’t update props in React?
Q107. How do you focus an input element on page load?
Q108. What are the different ways of updating objects in state?
Q110. How can we find the version of React at runtime in the browser?
Q111. What are the approaches to include polyfills in your create-react-app?
Q112. How to use https instead of http in create-react-app?
Q113. How do you avoid using relative path imports in create-react-app?
Q114. How do you add Google Analytics for react-router?
Q115. How do you update a component every second?
Q116. How to apply vendor prefixes to inline styles in React?
Q117. How do you import and export components using react and ES6?
Q118. What are the exceptions on React component naming?
Q119. Why is a component constructor called only once?
Q120. How do you define constants in React?
Q121. How do you programmatically trigger click event in React?
Q122. Can you use async/await in plain React?
Q123. What are the common folder structures for React?
Q124. What are the popular packages for animation?
Q125. What is the benefit of styles modules?
Q126. What are the popular React-specific linters?
Q127. How do you make AJAX call and In which component lifecycle methods should you make an AJAX call?
Q128. What are render props?
Q129. What is React Router?
Q130. How React Router is different from history library?
Q131. What are the <Router> components of React Router v4?
Q132. What’s the use of push and replace methods of history?
Q133. How do you programmatically navigate using React router v4?
Q134. How do you get query parameters in React Router v4
Q135. Why you get “Router may have only one child element” warning?
Q136. How do you pass params to history.push method in React Router v4?
Q137. How do you implement default or NotFound page?
Q138. How do you get history on React Router v4?
Q139. How to perform automatic redirect after login?
Q140. What is React-Intl?
Q141. What are the main features of React Intl?
Q142. What are the different ways of formatting in React Intl?
Q143. How do you use FormattedMessage as placeholder using React Intl?
Q144. How do you access current locale with React Intl
Q145. How to format date using React Intl?
Q146. Explain what is Shallow Renderer in React testing?
Q147. Explain what is TestRenderer package in React?
Q148. What’s the use of ReactTestUtils package?
Q149. What is Jest?
Q150. What are the benefits of Jest over Jasmine?
Q151. Give a simple example of Jest test case
Q152. What is Flux?
Q153. What is Redux?
Q154. What are the core principles of Redux?
Q155. What are the downsides of Redux compared to Flux?
Q156. What is the difference between mapStateToProps() and mapDispatchToProps()?
Q157. Can you dispatch an action in reducer?
Q158. How do you access Redux store outside a component?
Q159. What are the drawbacks of MVW pattern
Q160. Are there any similarities between Redux and RxJS?
Q161. How do you dispatch an action on load?
Q162. How do you use connect from React Redux?
Q163. How do you reset state in Redux?
Q164. Tell the purpose of at symbol in the redux connect decorator?
Q165. Tell the difference between React context and React Redux?
Q166. Why are Redux state functions called reducers?
Q167. How do you make AJAX request in Redux?
Q168. Should you keep all component’s state in Redux store?
Q169. What’s the proper way to access Redux store?
Q170. Tell the difference between component and container in React Redux
Q171. Explain the purpose of the constants in Redux?
Q172. Describe the different ways to write mapDispatchToProps()?
Q173. Explain the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?
Q174. How do you structure Redux top level directories?
Q175. What is redux-saga?
Q176. Explain the mental model of redux-saga.
Q177. Describe the differences between call and put in redux-saga
Q178. What is Redux Thunk?
Q179. Explain the differences between redux-saga and redux-thunk
Q180. What is Redux DevTools?
Q181. Describe the features of Redux DevTools?
Q182. What are Redux selectors and Why to use them?
Q183. What is Redux Form?
Q184. Describe the main features of Redux Form?
Q185. How do you add multiple middlewares to Redux?
Q186. How do you set initial state in Redux?
Q187. How Relay is different from Redux?
Q188. What is an action in Redux?
Q189. How to test React Native apps?
Q190. How to do logging in React Native?
Q191. How do you debug your React Native?
Q192. What is reselect and how it works?
Q193. What is Flow?
Q194. What’s the difference between Flow and PropTypes?
Q195. How to use font-awesome icons in React?
Q196. What is React Dev Tools?
Q197. Why does DevTools not load in Chrome for local files?
Q198. How to use Polymer in React?
Q199. What are the benefits of React over Vue.js?
Q200. Why React tab is not showing up in DevTools?
Q201. What are styled components?
Q202. Give an example of Styled Components?
Q203. What is Relay?
Q204. How to use TypeScript in create-react-app application?
Before you learn React, it’s important to build a base using HTML – considered the foundation of any website. Here is a list of HTML interview questions to help you get started.