InterviewHubPRO
HomeTracksSection 2: React & Modern Frontend (445 Qs)
Section 2 of 13445 Questions (1 Per Page)

Complete Master Interview: React 18/19, Hooks, Redux, React Router & Next.js

The definitive 445 React interview questions covering Core React, JSX, Virtual DOM, Fiber, Hooks, Context, Redux Toolkit, React Router v6, SSR, React 19 Actions, and Historical Internals.

Curriculum Roadmap & Learning Path

11 Stages
Tip: Click any stage card above to instantly filter the question bank to that topic.11 Connected Milestones

Part 1: Core React, JSX & Component Architecture (1 - 77)

77 Questions
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 an Element and a 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 the Pointer Events supported in React?

54

Why should component names start with capital letter?

55

Are custom DOM attributes supported in React v16?

56

How to loop inside JSX?

57

How do you access props in attribute quotes?

58

What is React proptype array with shape?

59

How to conditionally apply class attributes?

60

What is the difference between React and ReactDOM?

61

Why ReactDOM is separated from React?

62

How to use React label element?

63

How to combine multiple inline style objects?

64

How to re-render the view when the browser is resized?

65

How to pretty print JSON with React?

66

Why can't you update props in React?

67

How to focus an input element on page load?

68

How can we find the version of React at runtime in the browser?

69

How to add Google Analytics for React Router?

70

How do you apply vendor prefixes to inline styles in React?

71

How to import and export components using React and ES6?

72

What are the exceptions on React component naming?

73

Is it possible to use async/await in plain React?

74

What are the common folder structures for React?

75

What are the popular packages for animation?

76

What is the benefit of styles modules?

77

What are the popular React-specific linters?

Part 5: React Redux State Management (101 - 134)

34 Questions
101

What is flux?

102

What is Redux?

103

What are the core principles of Redux?

104

What are the downsides of Redux compared to Flux?

105

What is the difference between mapStateToProps() and mapDispatchToProps()?

106

Can I dispatch an action in reducer?

107

How to access Redux store outside a component?

108

What are the drawbacks of MVW pattern?

109

Are there any similarities between Redux and RxJS?

110

How to reset state in Redux?

111

What is the difference between React context and React Redux?

112

Why are Redux state functions called reducers?

113

How to make AJAX request in Redux?

114

Should I keep all component's state in Redux store?

115

What is the proper way to access Redux store?

116

What is the difference between component and container in React Redux?

117

What is the purpose of the constants in Redux?

118

What are the different ways to write mapDispatchToProps()?

119

What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?

120

How to structure Redux top level directories?

121

What is redux-saga?

122

What is the mental model of redux-saga?

123

What are the differences between call() and put() in redux-saga?

124

What is Redux Thunk?

125

What are the differences between redux-saga and redux-thunk?

126

What is Redux DevTools?

127

What are the features of Redux DevTools?

128

What are Redux selectors and why use them?

129

What is Redux Form?

130

What are the main features of Redux Form?

131

How to add multiple middlewares to Redux?

132

How to set initial state in Redux?

133

How Relay is different from Redux?

134

What is an action in Redux?

Part 8: Advanced React Patterns, Portals & Performance (152 - 261)

110 Questions
152

What are the main features of Reselect library?

153

Can Redux only be used with React?

154

Do you need to have a particular build tool to use Redux?

155

How Redux Form initialValues get updated from state?

156

How React PropTypes allow different types for one prop?

157

Can I import an SVG file as react component?

158

What is render hijacking in react?

159

How to pass numbers to React component?

160

Do I need to keep all my state into Redux? Should I ever use react internal state?

161

What is the purpose of registerServiceWorker in React?

162

What is React memo function?

163

What is React lazy function?

164

How to prevent unnecessary updates using setState?

165

How do you render Array, Strings and Numbers in React 16 Version?

166

What are hooks?

167

What rules need to be followed for hooks?

168

How to ensure hooks followed the rules in your project?

169

What are the differences between Flux and Redux?

170

What are the benefits of React Router V4?

171

Can you describe about componentDidCatch lifecycle method signature?

172

In which scenarios do error boundaries not catch errors?

173

What is the behavior of uncaught errors in react 16?

174

What is the proper placement for error boundaries?

175

What is the benefit of component stack trace from error boundary?

176

What are default props?

177

What is the purpose of displayName class property?

178

What is the browser support for react applications?

179

What is code-splitting?

180

What are Keyed Fragments?

181

Does React support all HTML attributes?

182

When component props defaults to true?

183

What is NextJS and major features of it?

184

How do you pass an event handler to a component?

185

How to prevent a function from being called multiple times?

186

How JSX prevents Injection Attacks?

187

How do you update rendered elements?

188

How do you say that props are readonly?

189

What are the conditions to safely use the index as a key?

190

Should keys be globally unique?

191

What is the popular choice for form handling?

192

What are the advantages of formik over redux form library?

193

Why are you not required to use inheritance?

194

Can I use web components in react application?

195

What is dynamic import?

196

What are loadable components?

197

What is suspense component?

198

What is route based code splitting?

199

What is the purpose of default value in context?

200

What is diffing algorithm?

201

What are the rules covered by diffing algorithm?

202

When do you need to use refs?

203

Must prop be named as render for render props?

204

What are the problems of using render props with pure components?

205

What is windowing technique?

206

How do you print falsy values in JSX?

207

What is the typical use case of portals?

208

How do you set default value for uncontrolled component?

209

What is your favorite React stack?

210

What is the difference between Real DOM and Virtual DOM?

211

How to add Bootstrap to a react application?

212

Can you list down top websites or applications using react as front end framework?

213

Is it recommended to use CSS In JS technique in React?

214

Do I need to rewrite all my class components with hooks?

215

What is useEffect hook? How to fetch data with React Hooks?

216

Is Hooks cover all use cases for classes?

217

What is the stable release for hooks support?

218

Why do we use array destructuring (square brackets notation) in useState?

219

What are the sources used for introducing hooks?

220

How do you access imperative API of web components?

221

What is formik?

222

What are typical middleware choices for handling asynchronous calls in Redux?

223

Do browsers understand JSX code?

224

Describe about data flow in react?

225

What is MobX?

226

What are the differences between Redux and MobX?

227

Should I learn ES6 before learning ReactJS?

228

Explain concurrent rendering with an example

229

What is the difference between async mode and concurrent mode?

230

What is the purpose of eslint plugin for hooks?

231

What is the difference between Imperative and Declarative in React?

232

What are the benefits of using TypeScript with ReactJS?

233

How do you make sure that user remains authenticated on page refresh while using Context API State Management?

234

What are the benefits of new JSX transform?

235

How is the new JSX transform different from old transform??

236

What are React Server components?

237

What is prop drilling?

238

What is the difference between useState and useRef hook?

239

What is a wrapper component?

240

What are the differences between useEffect and useLayoutEffect hooks?

241

What are the differences between Functional and Class Components?

242

What is strict mode in React?

243

What is the benefit of strict mode?

244

Why does strict mode render twice in React?

245

What are the rules of JSX?

246

What is the reason behind multiple JSX tags to be wrapped?

247

How do you prevent mutating array variables?

248

What are capture phase events?

249

How does React updates screen in an application?

250

How does React batch multiple state updates?

251

Is it possible to prevent automatic batching?

252

What is React hydration?

253

How do you update objects inside state?

254

How do you update nested objects inside state?

255

How do you update arrays inside state?

256

How do you use immer library for state updates?

257

What are the benefits of preventing the direct state mutations?

258

What are the preferred and non-preferred array operations for updating the state?

259

What will happen by defining nested function components?

260

Can I use keys for non-list items?

261

What are the guidelines to be followed for writing reducers?

Part 9: React Hooks Deep Dive (262 - 316)

55 Questions
262

How does ReactJS work behind the scenes?

263

How is useReducer Different from useState?

264

What is useContext? What are the steps to follow for useContext?

265

What are the use cases of useContext hook?

266

When to use client and server components?

267

What are the differences between page router and app router in nextjs?

268

Can you describe the useMemo() Hook?

269

Can Hooks be used in class components?

270

What is an updater function? Should an updater function be used in all cases?

271

Can useState take a function as an initial value?

272

What types of values can useState hold?

273

What happens if you call useState conditionally?

274

Is useState Synchronous or Asynchronous?

275

Can you explain how useState works internally?

276

What is useReducer? Why do you use useReducer?

277

How does useReducer works? Explain with an example

278

Can you combine **useReducer** with **useContext**?

279

Can you dispatch multiple actions in a row with useReducer?

280

Is dispatch from useReducer asynchronous and does it update state immediately?

281

How does useContext works? Explain with an example

282

Can You Use Multiple Contexts in One Component?

283

What's a common pitfall when using useContext with objects?

284

What would the context value be for no matching provider?

285

How do reactive dependencies in the useEffect dependency array affect its execution behavior?

286

When and how often does React invoke the setup and cleanup functions inside a useEffect hook?

287

What happens if you return a Promise from useEffect??

288

Can you have multiple useEffect hooks in a single component?

289

How to prevent infinite loops with useEffect?

290

What are the usecases of useLayoutEffect?

291

How does useLayoutEffect work during server-side rendering (SSR)?

292

What happens if you use useLayoutEffect for non-layout logic?

293

How does useLayoutEffect cause layout thrashing?

294

How Do You Use useRef to Access a DOM Element in React? Give an example.

295

Can you use useRef to persist values across renders??

296

Can useRef be used to store previous values?

297

Is it possible to access a ref in the render method?

298

What are the common usecases of useRef hook?

299

What is useImperativeHandle Hook? Give an example.

300

When should you use useImperativeHandle?

301

Is that possible to use useImperativeHandle without forwardRef?

302

How is useMemo different from useCallback?

303

Does useMemo prevent re-rendering of child components?

304

What is useCallback and why is it used?

305

What are Custom React Hooks, and How Can You Develop One?

306

How does React Fiber works? Explain in detail.

307

What is the useId hook and when should you use it?

308

What is the useDeferredValue hook?

309

What is the useTransition hook and how does it differ from useDeferredValue?

310

What is the useSyncExternalStore hook?

311

What is the useInsertionEffect hook?

312

How do you share state logic between components using custom hooks?

313

What is the useDebugValue hook?

314

How do you handle cleanup in useEffect?

315

What are the differences between useEffect and useEvent (experimental)?

316

What are the best practices for using React Hooks?

Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)

37 Questions
317

What are the key features introduced in React 18?

318

What are the key features introduced in React 19?

319

What is the use() hook in React 19?

320

What are Server Actions in React 19?

321

What are useFormState and useFormStatus hooks?

322

What is the useOptimistic hook?

323

What is the React Compiler (React Forget)?

324

What is Streaming SSR and how does React 18+ improve it?

325

What is renderToPipeableStream and how is it different from renderToString?

326

What is the difference between HOCs and Hooks?

327

Does React.memo prevent Context consumers from re-rendering?

328

How would you create a reusable Context?

329

Why is Redux Toolkit recommended over Redux?

330

What is the difference between client state and server state?

331

How do you prevent unnecessary Redux re-renders?

332

What is createSelector?

333

What is normalized Redux state?

334

Why is normalized state important for performance?

335

What is Redux middleware?

336

What is the Redux middleware signature?

337

What happens when you dispatch an action?

338

How would you structure Redux in a large application?

339

How do you handle cross-slice communication?

340

What are Redux serializable values?

341

How do you handle race conditions in Redux?

342

How do you persist Redux state?

343

How do you debug a Redux performance problem?

344

What should be stored in Redux vs derived with selectors?

345

Would you put all API data into Redux?

346

What is the difference between BrowserRouter, HashRouter, and MemoryRouter?

347

What are dynamic routes and what are route parameters?

348

How do you navigate programmatically in React Router?

349

What is the difference between Link, NavLink, and <a>?

350

How do you implement protected/private routes?

351

How do you handle 404 / Not Found routes?

352

What are loaders, actions, and data APIs in modern React Router?

353

How do query parameters work?

Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)

92 Questions
354

What is Concurrent Rendering? (Legacy)

355

Why should we not update the state directly?

356

What is the purpose of callback function as an argument of setState()?

357

How to bind methods or event handlers in JSX callbacks?

358

How to pass a parameter to an event handler or callback?

359

What is the use of refs?

360

How to create refs?

361

What are forward refs?

362

Which is preferred option with in callback refs and findDOMNode()?

363

Why are String Refs legacy?

364

What are the different phases of component lifecycle?

365

What are the lifecycle methods of React?

366

How to create props proxy for HOC component?

367

What is context?

368

What is the purpose of using super constructor with props argument?

369

How to set state with a dynamic key name?

370

What would be the common mistake of function being called every time the component renders?

371

What are error boundaries in React v16?

372

How are error boundaries handled in React v15?

373

What is the purpose of render method of react-dom?

374

What will happen if you use setState() in constructor?

375

Is it good to use setState() in componentWillMount() method?

376

What will happen if you use props in initial state?

377

How you use decorators in React?

378

What is CRA and its benefits?

379

What is the lifecycle methods order in mounting?

380

What are the lifecycle methods going to be deprecated in React v16?

381

What is the purpose of getDerivedStateFromProps() lifecycle method?

382

What is the purpose of getSnapshotBeforeUpdate() lifecycle method?

383

What is the recommended way for naming components?

384

What is the recommended ordering of methods in component class?

385

Why we need to pass a function to setState()?

386

Why is isMounted() an anti-pattern and what is the proper solution?

387

What is the difference between constructor and getInitialState?

388

Can you force a component to re-render without calling setState?

389

What is the difference between super() and super(props) in React using ES6 classes?

390

What is the difference between setState() and replaceState() methods?

391

How to listen to state changes?

392

What is the recommended approach of removing an array element in React state?

393

Is it possible to use React without rendering HTML?

394

What are the possible ways of updating objects in state?

395

What are the approaches to include polyfills in your create-react-app?

396

How to use https instead of http in create-react-app?

397

How to avoid using relative path imports in create-react-app?

398

How to update a component every second?

399

Why is a component constructor called only once?

400

How to define constants in React?

401

How to programmatically trigger click event in React?

402

How to make AJAX call and in which component lifecycle methods should I make an AJAX call?

403

What are render props?

404

How to dispatch an action on load?

405

How to use connect() from React Redux?

406

Whats the purpose of at symbol in the Redux connect decorator?

407

How to use TypeScript in create-react-app application?

408

Does the statics object work with ES6 classes in React?

409

Why are inline ref callbacks or functions not recommended?

410

What are HOC factory implementations?

411

How to use class field declarations syntax in React classes?

412

Why do you not need error boundaries for event handlers?

413

What is the difference between try catch block and error boundaries?

414

What is the required method to be defined for a class component?

415

What are the possible return types of render method?

416

What is the main purpose of constructor?

417

Is it mandatory to define constructor for React component?

418

Why should not call setState in componentWillUnmount?

419

What is the purpose of getDerivedStateFromError?

420

What is the methods order when component re-rendered?

421

What are the methods invoked during error handling?

422

What is the purpose of unmountComponentAtNode method?

423

What are the limitations with HOCs?

424

How to debug forwardRefs in DevTools?

425

Is it good to use arrow functions in render methods?

426

How do you say that state updates are merged?

427

How do you pass arguments to an event handler?

428

How to prevent component from rendering?

429

Give an example on How to use context?

430

How do you use contextType?

431

What is a consumer?

432

How do you solve performance corner cases while using context?

433

What is the purpose of forward ref in HOCs?

434

Is ref argument available for all functions or class components?

435

Why do you need additional care for component libraries while using forward refs?

436

How to create react class components without ES6?

437

Is it possible to use react without JSX?

438

How do you create HOC using render props?

439

What is react scripts?

440

What are the features of create react app?

441

What is the purpose of renderToNodeStream method?

442

How do you get redux scaffolding using create-react-app?

443

What is state mutation and how to prevent it?

444

What are React Mixins?

445

Can I use javascript urls in react16.9?