React Interview Questions & Answers

| No. | Questions | | --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | Core React | | 1 | What is React? | | 2 | What is the history behind React’s evolution? | | 3 | What are the major features of React? | | 4 | What is JSX? | | 5 | What is the difference between an Element and a Component? | | 6 | How do you create components in React? | | 7 | When should you 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 the "key" prop and what is its benefit when used in arrays of elements? | | 16 | What is the Virtual DOM? | | 17 | How does the Virtual DOM work? | | 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 the children prop? | | 27 | How do you write comments in React? | | 28 | What is reconciliation? | | 29 | Does the lazy function support named exports? | | 30 | Why does React use className instead of the class attribute? | | 31 | What are Fragments? | | 32 | Why are Fragments better than container divs? | | 33 | What are portals in React? | | 34 | What are stateless components? | | 35 | What are stateful components? | | 36 | How do you apply validation to 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 the react-dom package? | | 41 | What is ReactDOMServer? | | 42 | How do you use innerHTML in React? | | 43 | How do you apply styles in React? | | 44 | How are events different in React? | | 45 | What is the impact of using indexes as keys? | | 46 | How do you conditionally render components? | | 47 | Why do we need to be careful when spreading props on DOM elements? | | 48 | How do you memoize a component? | | 49 | How do you implement Server-Side Rendering (SSR)? | | 50 | How do you 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 a capital letter? | | 56 | Are custom DOM attributes supported in React v16? | | 57 | How do you loop inside JSX? | | 58 | How do you access props within attribute quotes? | | 59 | What is a React PropType array with shape? | | 60 | How do you conditionally apply class attributes? | | 61 | What is the difference between React and ReactDOM? | | 62 | Why is ReactDOM separated from React? | | 63 | How do you use the React label element? | | 64 | How do you combine multiple inline style objects? | | 65 | How do you re-render the view when the browser is resized? | | 66 | How do you pretty-print JSON with React? | | 67 | Why can’t you update props in React? | | 68 | How do you focus an input element on page load? | | 69 | How can you find the version of React at runtime in the browser? | | 70 | How do you add Google Analytics for React Router? | | 71 | How do you apply vendor prefixes to inline styles in React? | | 72 | How do you import and export components using React and ES6? | | 73 | What are the exceptions to React component naming? | | 74 | Is it possible to use async/await in plain React? | | 75 | What are common folder structures for React? | | 76 | What are popular packages for animation? | | 77 | What are the benefits of style modules? | | 78 | What are popular React-specific linters? | | | React Router | | 79 | What is React Router? | | 80 | How is React Router different from the history library? | | 81 | What are the components of React Router v6? | | 82 | What is the purpose of the push and replace methods of history? | | 83 | How do you programmatically navigate using React Router v4? | | 84 | How do you get query parameters in React Router v4? | | 85 | Why do you get a "Router may have only one child element" warning? | | 86 | How do you pass params to the history.push method in React Router v4? | | 87 | How do you implement a default or NotFound page? | | 88 | How do you get history in React Router v4? | | 89 | How do you perform an 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 do you use FormattedMessage as a placeholder with React Intl? | | 94 | How do you access the current locale with React Intl? | | 95 | How do you format a date using React Intl? | | | React Testing | | 96 | What is the Shallow Renderer in React testing? | | 97 | What is the TestRenderer package in React? | | 98 | What is the purpose of the ReactTestUtils package? | | 99 | What is Jest? | | 100 | What are the advantages of Jest over Jasmine? | | 101 | Can you give a simple example of a 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 you dispatch an action in a reducer? | | 108 | How do you access the Redux store outside a component? | | 109 | What are the drawbacks of the MVW pattern? | | 110 | Are there any similarities between Redux and RxJS? | | 111 | How do you 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 do you make an AJAX request in Redux? | | 115 | Should you keep all component states in the Redux store? | | 116 | What is the proper way to access the Redux store? | | 117 | What is the difference between a component and a container in React Redux? | | 118 | What is the purpose of 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 do you 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 should you use them? | | 130 | What is Redux Form? | | 131 | What are the main features of Redux Form? | | 132 | How do you add multiple middlewares to Redux? | | 133 | How do you set the initial state in Redux? | | 134 | How is Relay different from Redux? | | 135 | What is an action in Redux? | | | React Native | | 136 | What is the difference between React Native and React? | | 137 | How do you test React Native apps? | | 138 | How do you log in React Native? | | 139 | How do you debug React Native apps? | | | React Supported Libraries and Integration | | 140 | What is Reselect and how does it work? | | 141 | What is Flow? | | 142 | What is the difference between Flow and PropTypes? | | 143 | How do you use Font Awesome icons in React? | | 144 | What is React DevTools? | | 145 | Why does DevTools not load in Chrome for local files? | | 146 | How do you 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 is the React tab not showing up in DevTools? | | 150 | What are styled-components? | | 151 | Can you give an example of styled-components? | | 152 | What is Relay? | | | Miscellaneous | | 153 | What are the main features of the Reselect library? | | 154 | Can you give an example of Reselect usage? | | 155 | Can Redux only be used with React? | | 156 | Do you need a specific build tool to use Redux? | | 157 | How do Redux Form initial values get updated from state? | | 158 | How do React PropTypes allow different types for one prop? | | 159 | Can you import an SVG file as a React component? | | 160 | What is render hijacking in React? | | 161 | How do you pass numbers to a React component? | | 162 | Do you need to keep all state in Redux? Should you ever use React’s internal state? | | 163 | What is the purpose of registerServiceWorker in React? | | 164 | What is the React.memo function? | | 165 | What is the React.lazy function? | | 166 | How do you prevent unnecessary updates using setState? | | 167 | How do you render arrays, strings, and numbers in React v16? | | 168 | What are Hooks? | | 169 | What rules must be followed for Hooks? | | 170 | How do you ensure Hooks follow 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 the componentDidCatch lifecycle method signature? | | 174 | In which scenarios do error boundaries not catch errors? | | 175 | What is the behavior of uncaught errors in React v16? | | 176 | What is the proper placement for error boundaries? | | 177 | What is the benefit of a component stack trace from an error boundary? | | 178 | What are default props? | | 179 | What is the purpose of the 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 do component props default to true? | | 185 | What is Next.js and what are its major features? | | 186 | How do you pass an event handler to a component? | | 187 | How do you prevent a function from being called multiple times? | | 188 | How does JSX prevent injection attacks? | | 189 | How do you update rendered elements? | | 190 | How do you indicate that props are read-only? | | 191 | What are the conditions for safely using an index as a key? | | 192 | Do keys need to be globally unique? | | 193 | What is the popular choice for form handling? | | 194 | What are the advantages of Formik over the Redux Form library? | | 195 | Why are you not required to use inheritance? | | 196 | Can you use web components in a React application? | | 197 | What is a dynamic import? | | 198 | What are loadable components? | | 199 | What is a Suspense component? | | 200 | What is route-based code splitting? | | 201 | What is the purpose of the default value in Context? | | 202 | What is the diffing algorithm? | | 203 | What rules are covered by the diffing algorithm? | | 204 | When do you need to use refs? | | 205 | Must a prop be named "render" for render props? | | 206 | What are the problems with using render props with Pure Components? | | 207 | What is the windowing technique? | | 208 | How do you print falsy values in JSX? | | 209 | What is the typical use case for portals? | | 210 | How do you set a default value for an uncontrolled component? | | 211 | What is your favorite React stack? | | 212 | What is the difference between the real DOM and the Virtual DOM? | | 213 | How do you add Bootstrap to a React application? | | 214 | Can you list the top websites or applications using React as a front-end framework? | | 215 | Is it recommended to use the CSS-in-JS technique in React? | | 216 | Do you need to rewrite all class components with Hooks? | | 217 | How do you fetch data with React Hooks? | | 218 | Do Hooks cover all use cases for classes? | | 219 | What is the stable release for Hooks support? | | 220 | Why do we use array destructuring (square bracket notation) in useState? | | 221 | What sources were used for introducing Hooks? | | 222 | How do you access the 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 | Can you describe data flow in React? | | 227 | What is MobX? | | 228 | What are the differences between Redux and MobX? | | 229 | Should you learn ES6 before learning ReactJS? | | 230 | What is concurrent rendering? | | 231 | What is the difference between async mode and concurrent mode? | | 232 | Can you use JavaScript URLs in React v16.9? | | 233 | What is the purpose of the ESLint plugin for Hooks? | | 234 | What is the difference between imperative and declarative programming in React? | | 235 | What are the benefits of using TypeScript with ReactJS? | | 236 | How do you ensure a user remains authenticated on page refresh while using Context API state management? | | 237 | What are the benefits of the new JSX transform?