React Interview Questions & Answers

Click :star:if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions and DataStructures and Algorithms for DSA related questions or problems.

Table of Contents

| No. | Questions | | --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | Core React | | 1 | What is React? | | 2 | What is the history behind React evolution? | | 3 | What are the major features of React? | | 4 | What is JSX? | | 5 | What is the difference between Element and Component? | | 6 | How to create components in React? | | 7 | When to use a Class Component over a Function Component? | | 8 | What are Pure Components? | | 9 | What is state in React? | | 10 | What are props in React? | | 11 | What is the difference between state and props? | | 12 | What is the difference between HTML and React event handling? | | 13 | What are synthetic events in React? | | 14 | What are inline conditional expressions? | | 15 | What is "key" prop and what is the benefit of using it in arrays of elements? | | 16 | What is Virtual DOM? | | 17 | How Virtual DOM works? | | 18 | What is the difference between Shadow DOM and Virtual DOM? | | 19 | What is React Fiber? | | 20 | What is the main goal of React Fiber? | | 21 | What are controlled components? | | 22 | What are uncontrolled components? | | 23 | What is the difference between createElement and cloneElement? | | 24 | What is Lifting State Up in React? | | 25 | What are Higher-Order components? | | 26 | What is children prop? | | 27 | How to write comments in React? | | 28 | What is reconciliation? | | 29 | Does the lazy function support named exports? | | 30 | Why React uses className over class attribute? | | 31 | What are fragments? | | 32 | Why fragments are better than container divs? | | 33 | What are portals in React? | | 34 | What are stateless components? | | 35 | What are stateful components? | | 36 | How to apply validation on props in React? | | 37 | What are the advantages of React? | | 38 | What are the limitations of React? | | 39 | What are the recommended ways for static type checking? | | 40 | What is the use of react-dom package? | | 41 | What is ReactDOMServer? | | 42 | How to use InnerHtml in React? | | 43 | How to use styles in React? | | 44 | How events are different in React? | | 45 | What is the impact of indexes as keys? | | 46 | How do you conditionally render components? | | 47 | Why we need to be careful when spreading props on DOM elements?? | | 48 | How do you memoize a component? | | 49 | How you implement Server-Side Rendering or SSR? | | 50 | How to enable production mode in React? | | 51 | Do Hooks replace render props and higher order components? | | 52 | What is a switching component? | | 53 | What are React Mixins? | | 54 | What are the Pointer Events supported in React? | | 55 | Why should component names start with capital letter? | | 56 | Are custom DOM attributes supported in React v16? | | 57 | How to loop inside JSX? | | 58 | How do you access props in attribute quotes? | | 59 | What is React PropType array with shape? | | 60 | How to conditionally apply class attributes? | | 61 | What is the difference between React and ReactDOM? | | 62 | Why ReactDOM is separated from React? | | 63 | How to use React label element? | | 64 | How to combine multiple inline style objects? | | 65 | How to re-render the view when the browser is resized? | | 66 | How to pretty print JSON with React? | | 67 | Why you can't update props in React? | | 68 | How to focus an input element on page load? | | 69 | How can we find the version of React at runtime in the browser? | | 70 | How to add Google Analytics for react-router? | | 71 | How do you apply vendor prefixes to inline styles in React? | | 72 | How to import and export components using react and ES6? | | 73 | What are the exceptions on React component naming? | | 74 | Is it possible to use async/await in plain React? | | 75 | What are the common folder structures for React? | | 76 | What are the popular packages for animation? | | 77 | What is the benefit of styles modules? | | 78 | What are the popular React-specific linters? | | | React Router | | 79 | What is React Router? | | 80 | How React Router is different from history library? | | 81 | What are the <Router> components of React Router v4? | | 82 | What is the purpose of push and replace methods of history? | | 83 | How do you programmatically navigate using React router v4? | | 84 | How to get query parameters in React Router v4 | | 85 | Why you get "Router may have only one child element" warning? | | 86 | How to pass params to history.push method in React Router v4? | | 87 | How to implement default or NotFound page? | | 88 | How to get history on React Router v4? | | 89 | How to perform automatic redirect after login? | | | React Internationalization | | 90 | What is React Intl? | | 91 | What are the main features of React Intl? | | 92 | What are the two ways of formatting in React Intl? | | 93 | How to use FormattedMessage as placeholder using React Intl? | | 94 | How to access current locale with React Intl | | 95 | How to format date using React Intl? | | | React Testing | | 96 | What is Shallow Renderer in React testing? | | 97 | What is TestRenderer package in React? | | 98 | What is the purpose of ReactTestUtils package? | | 99 | What is Jest? | | 100 | What are the advantages of Jest over Jasmine? | | 101 | Give a simple example of Jest test case | | | React Redux | | 102 | What is Flux? | | 103 | What is Redux? | | 104 | What are the core principles of Redux? | | 105 | What are the downsides of Redux compared to Flux? | | 106 | What is the difference between mapStateToProps() and mapDispatchToProps()? | | 107 | Can I dispatch an action in reducer? | | 108 | How to access Redux store outside a component? | | 109 | What are the drawbacks of MVW pattern | | 110 | Are there any similarities between Redux and RxJS? | | 111 | How to reset state in Redux? | | 112 | What is the difference between React context and React Redux? | | 113 | Why are Redux state functions called reducers? | | 114 | How to make AJAX request in Redux? | | 115 | Should I keep all component's state in Redux store? | | 116 | What is the proper way to access Redux store? | | 117 | What is the difference between component and container in React Redux? | | 118 | What is the purpose of the constants in Redux? | | 119 | What are the different ways to write mapDispatchToProps()? | | 120 | What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()? | | 121 | How to structure Redux top level directories? | | 122 | What is redux-saga? | | 123 | What is the mental model of redux-saga? | | 124 | What are the differences between call and put in redux-saga | | 125 | What is Redux Thunk? | | 126 | What are the differences between redux-saga and redux-thunk | | 127 | What is Redux DevTools? | | 128 | What are the features of Redux DevTools? | | 129 | What are Redux selectors and Why to use them? | | 130 | What is Redux Form? | | 131 | What are the main features of Redux Form? | | 132 | How to add multiple middlewares to Redux? | | 133 | How to set initial state in Redux? | | 134 | How Relay is different from Redux? | | 135 | What is an action in Redux? | | | React Native | | 136 | What is the difference between React Native and React? | | 137 | How to test React Native apps? | | 138 | How to do logging in React Native? | | 139 | How to debug your React Native? | | | React supported libraries and Integration | | 140 | What is reselect and how it works? | | 141 | What is Flow? | | 142 | What is the difference between Flow and PropTypes? | | 143 | How to use font-awesome icons in React? | | 144 | What is React Dev Tools? | | 145 | Why is DevTools not loading in Chrome for local files? | | 146 | How to use Polymer in React? | | 147 | What are the advantages of React over Vue.js? | | 148 | What is the difference between React and Angular? | | 149 | Why React tab is not showing up in DevTools? | | 150 | What are styled components? | | 151 | Give an example of Styled Components? | | 152 | What is Relay? | | | Miscellaneous | | 153 | What are the main features of reselect library? | | 154 | Give an example of reselect usage? | | 155 | Can Redux only be used with React? | | 156 | Do you need to have a particular build tool to use Redux? | | 157 | How Redux Form initialValues get updated from state? | | 158 | How React PropTypes allow different type for one prop? | | 159 | Can I import an SVG file as react component? | | 160 | What is render hijacking in React? | | 161 | How to pass numbers to React component? | | 162 | Do I need to keep all my state into Redux? Should I ever use react internal state? | | 163 | What is the purpose of registerServiceWorker in React? | | 164 | What is React memo function? | | 165 | What is React lazy function? | | 166 | How to prevent unnecessary updates using setState? | | 167 | How do you render Array, Strings and Numbers in React 16 Version? | | 168 | What are hooks? | | 169 | What rules need to be followed for hooks? | | 170 | How to ensure hooks followed the rules in your project? | | 171 | What are the differences between Flux and Redux? | | 172 | What are the benefits of React Router V4? | | 173 | Can you describe about componentDidCatch lifecycle method signature? | | 174 | In which scenarios error boundaries do not catch errors? | | 175 | What is the behavior of uncaught errors in react 16? | | 176 | What is the proper placement for error boundaries? | | 177 | What is the benefit of component stack trace from error boundary? | | 178 | What are default props? | | 179 | What is the purpose of displayName class property? | | 180 | What is the browser support for react applications? | | 181 | What is code-splitting? | | 182 | What are Keyed Fragments? | | 183 | Does React support all HTML attributes? | | 184 | When component props defaults to true? | | 185 | What is NextJS and major features of it? | | 186 | How do you pass an event handler to a component? | | 187 | How to prevent a function from being called multiple times? | | 188 | How JSX prevents Injection Attacks? | | 189 | How do you update rendered elements? | | 190 | How do you say that props are read only? | | 191 | What are the conditions to safely use the index as a key? | | 192 | Is it keys should be globally unique? | | 193 | What is the popular choice for form handling? | | 194 | What are the advantages of formik over redux form library? | | 195 | Why do you not required to use inheritance? | | 196 | Can I use web components in react application? | | 197 | What is dynamic import? | | 198 | What are loadable components? | | 199 | What is suspense component? | | 200 | What is route based code splitting? | | 201 | What is the purpose of default value in context? | | 202 | What is diffing algorithm? | | 203 | What are the rules covered by diffing algorithm? | | 204 | When do you need to use refs? | | 205 | Is it prop must be named as render for render props? | | 206 | What are the problems of using render props with pure components? | | 207 | What is windowing technique? | | 208 | How do you print falsy values in JSX? | | 209 | What is the typical use case of portals? | | 210 | How do you set default value for uncontrolled component? | | 211 | What is your favorite React stack? | | 212 | What is the difference between Real DOM and Virtual DOM? | | 213 | How to add Bootstrap to a react application? | | 214 | Can you list down top websites or applications using react as front end framework? | | 215 | Is it recommended to use CSS In JS technique in React? | | 216 | Do I need to rewrite all my class components with hooks? | | 217 | How to fetch data with React Hooks? | | 218 | Is Hooks cover all use cases for classes? | | 219 | What is the stable release for hooks support? | | 220 | Why do we use array destructuring (square brackets notation) in useState? | | 221 | What are the sources used for introducing hooks? | | 222 | How do you access imperative API of web components? | | 223 | What is formik? | | 224 | What are typical middleware choices for handling asynchronous calls in Redux? | | 225 | Do browsers understand JSX code? | | 226 | Describe about data flow in react? | | 227 | What is MobX? | | 228 | What are the differences between Redux and MobX? | | 229 | Should I learn ES6 before learning ReactJS? | | 230 | What is Concurrent Rendering? | | 231 | What is the difference between async mode and concurrent mode? | | 232 | Can I use javascript urls in react16.9? | | 233 | What is the purpose of eslint plugin for hooks? | | 234 | What is the difference between Imperative and Declarative in React? | | 235 | What are the benefits of using typescript with reactjs? | | 236 | How do you make sure that user remains authenticated on page refresh while using Context API State Management? | | 237 | What are the benefits of new JSX transform? | | 238 | How is the new JSX transform different from old transform? | | 239 | What are React Server components? | | 240 | What is prop drilling? | | 241 | What is the difference between useState and useRef hook? | | 242 | What is a wrapper component | | 243 | What are the differences between useEffect and useLayoutEffect hooks | | 244 | What are the differences between Functional and Class Components | | 245 | What is strict mode in React? | | 246 | What is the benefit of strict mode? | | 247 | Why does strict mode render twice in React? | | 248 | What are the rules of JSX? | | 249 | What is the reason behind multiple JSX tags to be wrapped? | | 250 | How do you prevent mutating array variables? | | 251 | What are capture phase events? | | 252 | How does React updates screen in an application? | | 253 | How does React batch multiple state updates? | | 254 | Is it possible to prevent automatic batching? | | 255 | What is React hydration? | | 256 | How do you update objects inside state? | | 257 | How do you update nested objects inside state? | | 258 | How do you update arrays inside state? | | 259 | How do you use immer library for state updates? | | 260 | What are the benefits of preventing the direct state mutations? | | 261 | What are the preferred and non-preferred array operations for updating the state? | | 262 | [What will happen by defin