React Interview Questions & Answers

All rights reserved. No part of this book can be reproduced or stored in any retrieval system or transmitted in
any form or by any means, electronic, mechanical, photocopying, recording, uploading on server and scanning
without the prior written permission of the Dot Net Tricks Innovation Pvt. Ltd.

The author of this book has tried their best to ensure the accuracy of the information described in this book.
However, the author cannot guarantee the accuracy of the information contained in this book. The author or
Dot Net Tricks Innovation Pvt. Ltd. will not be liable for any damages, incidental or consequential caused directly
or indirectly by this book.

Further, readers should be aware that the websites or reference links listed in this book may have changed or
disappeared between when this book was written and when it is read.

All other trademarks referred to in this book are the property of their respective owners.

Release History
• Initial Release 1.0 - 3rd Sep 2019

1
Page
 About Dot Net Tricks
Dot Net Tricks is founded by Shailendra Chauhan (Microsoft MVP), on Jan 2010. Dot Net Tricks came into
existence in the form of a blog post over various technologies including .NET, C#, SQL Server, ASP.NET, ASP.NET
MVC, JavaScript, Angular, Node.js and Visual Studio, etc.

The company which is currently registered by a name of Dot Net Tricks Innovation Pvt. Ltd. came into the shape
in 2015. Dot Net Tricks website has an average footfall on the tune of 300k+ per month. The site has become a
cornerstone when it comes to getting skilled-up on .NET technologies and we want to gain the same level of
trust in other technologies. This is what we are striving for.

We have a very large number of trainees who have received training from our platforms and immediately got
placement in some of the reputed firms testifying our claims of providing quality training. The website offers you
a variety of free study material in the form of articles.

Dot Net Tricks Courses

Master in-demand job skills with our step by step and project-based courses. Learn to start a new career, with
our curated learning paths tailored to today's developers and technology needs. Learn to code, prepare yourself
for interviews, and get hired!

We offer the eBooks in the following categories:

• .NET Development
• Front-end Development
• Cloud
• DevOps
• Programming Languages
• Database - SQL and NoSQL
• Mobile Development
• ML/AI and many more...

You can start learning free from here: https://www.dotnettricks.com/courses

Dot Net Tricks Pro

DotNetTricks Pro unlocks the access of DotNetTricks premium features like unlimited access to all courses,
source codes, and assessments. Get help over email or phone. Upgrade your skills with curated learning paths
tailored to today's developers and technology needs. Learn new skills and discover the world of possibilities with
step-by-step guidance.
2
Page
Dot Net Tricks Pro Features

Each Pro member will get access to our full-featured learning platform with advanced tools, which is required to
learn new skills and advance his/her career.

Start your journey today to learn coding. Because learning to code is the first step and forward to advance your
career. The detail about Dot Net Tricks Pro can be found here: https://www.dotnettricks.com/pro-membership

Dot Net Tricks Live Training

Instructor-led Training Programs

For a beginner who needs regular guidance, we have a fully packed Master Courses. They are almost equal to
semester courses taught in engineering colleges when it comes to length, breadth of content delivery, the only
difference instead of 5-6 months, they take approx. 6 weeks of live classes.

The detail about Master courses can be found here: https://www.dotnettricks.com/instructor-led-courses

Corporate Training

Dot Net Tricks having a pool of mentors who help the corporate to enhance their employment skills as per
changing the technology landscape. Dot Net Tricks offers customized training programs for new hires and
3

experienced employees through online and classroom mode. As a trusted and resourceful training partner, Dot
Page
Net Tricks helps the corporate to achieve success with its industry-leading instructional design and customer
training initiatives.

Apart from these, we also provide on-demand boot camps and personalized project consultation.

The detail about Corporate Training can be found here: https://www.dotnettricks.com/corporate-training

Dot Net Tricks eBooks

Dot Net Tricks offer a wide range of eBooks on technical interviews Q&A. All eBooks are written by industry
experts and coaches. These eBooks will help you to prepare yourself for your next job within a short time. We
offer the eBooks in the following categories:

• .NET Development
• Front-end Development
• Cloud
• DevOps
• Programming Languages
• Database - SQL and NoSQL
• Mobile Development
• ML/AI and many more….

You can buy other eBooks from here: https://www.dotnettricks.com/books

Technical Recruiting
We provide full technical staffing service which suits our client needs. Our technical recruiters search across the
world to find highly skilled professionals that will fit our clients need. If you are looking for a job change, do
share your resume at hr@dotnettricks.com. Dot Net Tricks will help you to find your dream job in MNCs.

Join us today, learn to code, prepare yourself for interviews, and get hired!

4
Page
 Dedication
My mom Kiranben Pandya and my father Prakashbhai Pandya deserve to have their name on the cover as
much as I do for all their support made this possible. I would like to say thanks to all my family
members, friends, the mentors who supported me either directly or indirectly no matter how tough and
easy the situations to achieve my goals.

-Manav Pandya

5
Page
 Introduction
What Where Author Qualification to Write This Book
Manav Pandya is an enthusiast Front-end developer having vast experience, working on different technologies
like Angular, React, React-Native, VueJs, TypeScript, NodeJs, MongoDB and other technologies such as Redux,
Angular Material, Material-UI, Bootstrap, HTML, CSS, JQuery, etc.

What This Book Is

React is the most popular UI library developed by Facebook, to create single page application (SPA) as well as
Mobile and Desktop based applications. In this book, we are going to learn about the fundamentals of React like
JSX, Component, State, Props, Routing, Hooks, and many other topics.

What You’ll Learn

This book is for those who want to learn React and also for those who are going to appear for the React
interview to have a bright future in front-end technologies.

• Introducing React
• JSX in Depth
• Components
• State
• Props
• Forms
• Event Handling
• Conditional Rendering
• Routing
• React Hooks

Our best wishes always with you for your learning and growth!

6
Page
 About the Author
Manav Pandya - An Author and Front-end developer
Manav Pandya is working as a Front-end engineer with a leading
organization and having vast experience in Front-end technologies. He
is very passionate about the JavaScript, Angular, React and Vue.

He is Author, Blogger, Community contributor, Learner by following

self-learning approach.

He is keen to learn new technologies. His contributions gave him

various recognition including Member of the month September 2018,
Member of the month October 2018.

He always tries to keep updated himself about new technologies and learning new skills and share with other
in simple manner.

He hopes that this e-book helps you to crack interview of Angular. This is the first edition of this book but not
last. Please provide your feedback that helps us to improve this book quality.

7
Page
 How to Contact Us
Although the author of this book has tried to make this book as accurate as it possible but if there is something
strikes you as odd, or you find an error in the book please drop a line via e-mail.

The e-mail addresses are listed as follows:

• mentor@dotnettricks.com
• info@dotnettricks.com

We are always happy to hear from our readers. Please provide your valuable feedback and comments!

You can follow us on YouTube, Facebook, Twitter, LinkedIn, andGoogle Plus or subscribe to RSS feed.

8
Page
 Table of Contents

React Interview Questions & Answers ............................................................................ 1

Release History ...................................................................................................................................................1
About Dot Net Tricks ..........................................................................................................................................2
Dot Net Tricks Courses .......................................................................................................................................2
Dot Net Tricks Pro...............................................................................................................................................2
Dot Net Tricks Live Training ................................................................................................................................3
Dot Net Tricks eBooks ........................................................................................................................................4
Technical Recruiting ...........................................................................................................................................4
Dedication...........................................................................................................................................................5
Introduction ........................................................................................................................................................6
About the Author................................................................................................................................................7
How to Contact Us ..............................................................................................................................................8

Introducing React........................................................................................................... 16
Q1. What is React? ......................................................................................................................................... 16
Q2. Explain the evolution history of React? ................................................................................................... 16
Q3. Why use React? ....................................................................................................................................... 17
Q4. What are the important features of React? ............................................................................................ 17
Q5. What is Virtual DOM in React? ................................................................................................................ 17
Q6. What is the difference between Real DOM and Virtual DOM? .............................................................. 18
Q7. What is React Fiber? ................................................................................................................................ 18
Q8. What is Reconciliation? ........................................................................................................................... 19
Q9. What are the key points for considering Reconciliation? ....................................................................... 19
Q10. What are the important fields of Fiber?.................................................................................................. 19
Q11. What is Diffing Algorithm? ...................................................................................................................... 19
Q12. Why react getting so popular? ................................................................................................................ 20
Q13. What’s new in React 16.8? ...................................................................................................................... 20
Q14. What are the Hooks in React? ................................................................................................................. 21
9

Q15. Why we need Hooks in React? ................................................................................................................ 21

Page

Q16. What are the types of Hooks API? ........................................................................................................... 21

 Q17. How to use React Hooks? ........................................................................................................................ 22
Q18. How to add React in a web application? ................................................................................................. 23
Q19. How to minify React for the production?................................................................................................ 24
Q20. How to add JSX in our React minimal application? ................................................................................. 24
Q21. How to create a new React app?............................................................................................................. 24
Q22. How to run testing for the current React app? ....................................................................................... 25
Q23. How to build React app? ......................................................................................................................... 25
Q24. Explain the folder structure of a React app? ........................................................................................... 25
Q25. How to revoke build configuration of React app?................................................................................... 26
Q26. What IDE’s are used to develop a React application? ............................................................................. 26
Q27. How to update build tooling of a React app? .......................................................................................... 26
Q28. What are the advantages of using create-react-app? ............................................................................. 27
Q29. What are the disadvantages of using create-react-app? ........................................................................ 27
Q30. How to install different dependencies? .................................................................................................. 27

JSX in Depth ................................................................................................................... 28

Q1. What is JSX? ............................................................................................................................................. 28
Q2. How to write JSX syntax?......................................................................................................................... 28
Q3. Why we should use JSX?.......................................................................................................................... 29
Q4. How to use JavaScript Expression in JSX?................................................................................................ 29
Q5. How to write conditional statements using JSX? .................................................................................... 30
Q6. How to use attributes using JSX? ............................................................................................................ 30
Q7. How to use comments in JSX? ................................................................................................................. 31
Q8. How JSX contains child elements?........................................................................................................... 32
Q9. How JSX works behind the scene? .......................................................................................................... 32
Q10. What is React.createElement() method? ................................................................................................ 33
Q11. How to use Props using JSX? ................................................................................................................... 33
Q12. How to use custom JSX elements? .......................................................................................................... 34
Q13. How to send props/state to the child JSX using spread operator? ......................................................... 34
Q14. Why in JSX props default values are true? .............................................................................................. 35

Components .................................................................................................................. 37
10
Page

Q1. What is a Component? ............................................................................................................................ 37

 Q2. What is Component in React? ................................................................................................................. 37
Q3. How to create a Component in React? ................................................................................................... 37
Q4. What are different types of Component in React? ................................................................................. 38
Q5. What is stateful or Class-based Component in React?............................................................................ 38
Q6. What is Stateless or Functional Component in React? ........................................................................... 39
Q7. Which component type should we use in React? ................................................................................... 40
Q8. How to do Component Composing in React? ......................................................................................... 40
Q9. How to do Component Decomposing in React? ..................................................................................... 42
Q10. How to render a Component in React? ................................................................................................... 44
Q11. What are Pure and Impure Components in React?................................................................................. 44
Q12. When to use Pure Components in React? ............................................................................................... 44
Q13. Explain React component lifecycle methods........................................................................................... 45
Q14. Different stages of executing Component lifecycle methods ................................................................. 46
Q15. Do explain commonly used Component lifecycle methods? .................................................................. 46
Q16. Do explain other Component lifecycle methods? ................................................................................... 47
Q17. How to use Component lifecycle methods in React? .............................................................................. 48
Q18. What are the Class properties in React? ................................................................................................. 49
Q19. Do explain defaultProps in React?........................................................................................................... 49
Q20. Do explain displayName in React? .......................................................................................................... 50
Q21. What are the instance properties in React? ............................................................................................ 50
Q22. What is Controlled Component in React? ............................................................................................... 50
Q23. What is Uncontrolled Component in React? ........................................................................................... 51
Q24. What is Higher Order Component in React? ........................................................................................... 52
Q25. How to create a Higher Order Component (HOC) in React? ................................................................... 53
Q26. Why we should use HOC?........................................................................................................................ 54
Q27. How to render components conditionally? ............................................................................................. 54

State .............................................................................................................................. 56
Q1. What is a State in React? ......................................................................................................................... 56
Q2. How to declare State in React? ............................................................................................................... 56
Q3. What is the alternative approach to use State in a Component? ........................................................... 57
11

Q4. How to access State values?.................................................................................................................... 57

Page
 Q5. How to update State value? .................................................................................................................... 58
Q6. Why we should not update the State directly in React? ......................................................................... 59
Q7. When to use a callback function with State? .......................................................................................... 60
Q8. How to update multiple State values? .................................................................................................... 60
Q9. What is a getInitialState() in React? ........................................................................................................ 61
Q10. How to use State with Higher Order Component? ................................................................................. 62

Props.............................................................................................................................. 63
Q1. What is Props in React? ........................................................................................................................... 63
Q2. How to pass Props from parent to child? ................................................................................................ 63
Q3. How to access the Props value in Component? ...................................................................................... 64
Q4. How to pass Props to the Stateless function? ......................................................................................... 65
Q5. How to pass a complete object as Props to the Component? ................................................................ 65
Q6. How to provide default values to the Props in React? ............................................................................ 66
Q7. What is an alternative way to use default props?................................................................................... 67
Q8. How to provide the default types of Props? ........................................................................................... 68
Q9. How many prop types are supported in React? ...................................................................................... 70
Q10. How to use defaultProps in Stateless/Functional component? .............................................................. 70
Q11. What is a render prop in React? .............................................................................................................. 71
Q12. What is the Difference between State and Props? ................................................................................. 72

Forms ............................................................................................................................. 73
Q1. What are the Forms in React? ................................................................................................................. 73
Q2. How many types of Form input are supported? ..................................................................................... 73
Q3. What are Controlled inputs in React? ..................................................................................................... 73
Q4. What is Uncontrolled input in React? ..................................................................................................... 74
Q5. How to manage file input type using uncontrolled input? ..................................................................... 75
Q6. What is createRef in React? .................................................................................................................... 76
Q7. How to access ref in React? ..................................................................................................................... 77
Q8. How to pass callback ref between the Components? ............................................................................. 77
Q9. What is the defaultValue attribute in React? .......................................................................................... 78
12

Q10. How to handle multiple inputs in React? ................................................................................................ 79

Page

Event Handling ............................................................................................................... 81

 Q1. What is Event in React? ........................................................................................................................... 81
Q2. How to attach an event handler with an element? ................................................................................ 81
Q3. How to attach an event handler to the button element? ....................................................................... 81
Q4. How to prevent default behaviour in React? .......................................................................................... 82
Q5. How to use multiple event handlers in React?........................................................................................ 82
Q6. How to pass arguments to the event handlers in React? ....................................................................... 83
Q7. How to pass the event handler function as props?................................................................................. 84
Q8. How to access events coming from props in React? ............................................................................... 85
Q9. How to assign events using the bind method? ....................................................................................... 85
Q10. How to assign events using the arrow function? .................................................................................... 86

Conditional Rendering ................................................................................................... 87

Q1. What is Conditional Rendering in React? ................................................................................................ 87
Q2. How to render element based on if-else in React? ................................................................................. 87
Q3. How to render component conditionally using if-else in React? ............................................................ 88
Q4. How to use ternary operator for rendering element in React? .............................................................. 89
Q5. How to render element or component using && condition in React? ................................................... 89
Q6. How to render the element/content using switch case? ........................................................................ 89
Q7. How to use nested conditional rendering in React? ............................................................................... 90
Q8. How to prevent component being rendered? ........................................................................................ 91

Routing .......................................................................................................................... 92
Q1. What is Routing in React?........................................................................................................................ 92
Q2. What are different libraries available to implement routing in React? .................................................. 92
Q3. How to implement Routing in React? ..................................................................................................... 92
Q4. What is react-router-dom?...................................................................................................................... 93
Q5. How to implement basic routing in React? ............................................................................................. 93
Q6. What is <Link> in React Router? .............................................................................................................. 94
Q7. What is <Route> in React Router? .......................................................................................................... 95
Q8. How to configure Route prefix in React? ................................................................................................ 96
Q9. How many Route render methods are supported? ................................................................................ 96
13

Q10. What is <Router> in React Router? ......................................................................................................... 96

Page

Q11. What is <Switch> in React Router? ......................................................................................................... 96

 Q12. What is <BrowserRouter> in React Router? ............................................................................................ 97
Q13. How to identify activated link in React Router? ...................................................................................... 97
Q14. How to provide styles to activated link in React? ................................................................................... 98
Q15. How to pass route parameters in React Router? .................................................................................... 98
Q16. What is the Location object in React Router? ......................................................................................... 99
Q17. What is match object in React Router? ................................................................................................... 99
Q18. What is matchPath in React Router?..................................................................................................... 100
Q19. What is withRouter in React Router? .................................................................................................... 101
Q20. What is the history object in React Router?.......................................................................................... 102
Q21. How to enable server rendering in React Routing? .............................................................................. 105
Q22. How to redirect to default (404) page in React? ................................................................................... 105

React Hooks ................................................................................................................. 106

Q1. What are the Hooks in React? ............................................................................................................... 106
Q2. Why Hooks are useful? .......................................................................................................................... 106
Q3. What are the features of React Hooks? ................................................................................................ 106
Q4. How to get started with Hooks? ............................................................................................................ 107
Q5. What is the State Hook in React? .......................................................................................................... 107
Q6. What is the syntax using useState in React? ......................................................................................... 107
Q7. How to set the initial value using useState? ......................................................................................... 107
Q8. How to update state value using useState()?........................................................................................ 108
Q9. What is a useEffect hook in React? ....................................................................................................... 109
Q10. How to use useEffect hook? .................................................................................................................. 109
Q11. How to call useEffect hook for the specific number of time hook? ...................................................... 110
Q12. How to call API using useEffect hook? .................................................................................................. 110
Q13. What is a custom hook in React? .......................................................................................................... 111
Q14. How to create the custom hook? .......................................................................................................... 112
Q15. How to access custom hook in React? .................................................................................................. 113
Q16. What is a useReducer hook? ................................................................................................................. 113
Q17. How to use useReducer hook? .............................................................................................................. 114
Q18. What are the different hook types in React 16.8? ................................................................................ 115
14

Q19. Do we need to convert class component to function component? ...................................................... 115

Page
 Q20. Do all the third-party libraries support the hooks? ............................................................................... 115
Q21. Can we use multiple state variables using useState? ............................................................................ 115
Q22. Can we re-render the function component using forceUpdate()? ....................................................... 116
Q23. How to remember the cache value between multiple renders? .......................................................... 116
Q24. Can we use class and hook together? ................................................................................................... 117
Q25. What is the meaning by using square brackets [ ] in hooks? ................................................................ 117

References ................................................................................................................... 118

15
Page