Top 50+ React Interview Questions and Answers (2024)
Top 50+ React Interview Questions and Answers (2024)
React Tutorial React Exercise React Basic Concepts React Components React Props React Hooks Reac
In this article, we’ve covered the top React Interview Questions and
Answers that cover everything from basic to advanced React concepts such
as Virtual DOM, Components, State and Props, JSX, Hooks, Routing, and
more. Whether you are a fresher or an experienced professional with 2 –
10 years of experience, these React Interview Questions give you all the
confidence you need to ace your next technical interview.
Table of Content
React Interview Questions For Freshers
React Intermediate Interview Questions
React Interview Questions For Experienced
We useReact
cookies toInterview Questions
ensure you have the For Freshers
best browsing experience on our website. By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Got It !
1. What is ReactJS? Policy
ReactJS is a JavaScript library used to build reusable components for the
view layer in MVC architecture. It is highly efficient and uses a virtual DOM
to render components. It works on the client side and is written in JSX.
Sign up
Alexis
version control
again.
Work together in real time
with live doc editing.
Sign up
Props are used to pass data from one component to another. The state is
local data storage that is local to the component only and cannot be passed
to other components.
PROPS STATE
The Data is passed from one The Data is passed within the component
component to another. only.
It is Immutable (cannot be
It is Mutable ( can be modified).
modified).
Props can be used with state The state can be used only with the state
and functional components. components/class component (Before 16.0).
React uses Virtual DOM which is like a lightweight copy of the actual
DOM(a virtual representation of the DOM). So for every object that exists in
the original DOM, there is an object for that in React Virtual DOM. It is the
same, but it does not have the power to directly change the layout of the
document. Manipulating DOM is slow, but manipulating Virtual DOM is fast
as nothing gets drawn on the screen. So each time there is a change in the
We usestate
cookiesofto our
ensureapplication,
you have the bestthe virtual
browsing DOM
experience on gets updated
our website. By usingfirst instead of the
our site,
realyouDOM.
acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
6. What is JSX?
Javascript
const element = (
<h1>
Hello,
{name}.Welcome to GeeksforGeeks.
</h1>
);
London
INR
A 35,434.–
taste of happiness.
Travel is what
you make of it.
Conditions
We use cookies to ensure you have the best browsing experience on our website. By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
Functional Components: Functional components are simply javascript
functions. We can create a functional component in React by writing a
javascript function.
Class Components: The class components are a little more complex than
the functional components. The functional components are not aware of
the other components in your program whereas the class components
can work with each other. We can pass data from one class component to
another class component.
In general, browsers are not capable of reading JSX and only can read pure
JavaScript. The web browsers read JSX with the help of a transpiler.
Transpilers are used to convert JSX into JavaScript. The transpiler used is
called Babel
9. Explain the steps to create a react application and print Hello World?
To install React, first, make sure Node is installed on your computer. After
installing Node. Open the terminal and type the following command.
cd <<Application_Name>>
Javascript
Javascript
function Component() {
doSomething(e);
{
e.preventDefault();
// Some more response to the event
}
return <button onEvent={doSomething}></button>;
}
Lists are very useful when it comes to developing the UI of any website.
Lists are mainly used for displaying menus on a website, for example, the
navbar menu. To create a list in React use the map method of array as
follows.
Javascript
ReactDOM.render(<ul>{updatedNums}</ul>,
document.getElementById("root"));
A “key” is a special string attribute you need to include when creating lists of
elements in React. Keys are used in React to identify which items in the list
We use cookies to ensure you have the best browsing experience on our website. By using
areyouchanged,
our site, acknowledgeupdated, orread
that you have deleted. In other
and understood words,
our Cookie we
Policy can say that keys are
& Privacy
used to give an identity toPolicy the elements in the lists.
13. How to write a comment in React?
React renders HTML to the web page by using a function called render().
The purpose of the function is to display the specified HTML code inside the
specified HTML element. In the render() method, we can read props and
We use cookies
state andto ensure
returnyouour
have JSX
the best browsing
code experience
to the on our website. Byofusing
root component our app.
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
16. What is state in React?
We can access any props inside from the component’s class to which the
props is passed. The props can be accessed as shown below:
this.props.propName;
returning JSX
React lifecycle methods (for example, React lifecycle methods can be used
componentDidMount) cannot be used inside class components (for example,
in functional components. componentDidMount).
npm i react-router-dom
We use the setState() method to change the state object. It ensures that the
component has been updated and calls for re-rendering of the component.
The state object of a component may contain multiple attributes and React
allows using setState() function to update only a subset of those attributes
as well as using multiple setState() methods to update each attribute value
independently.
Refs are a function provided by React to access the DOM element and the
React element that you might have created on your own. They are used in
cases where we want to change the value of a child component, without
making use of props and all. They have wide functionality as we can use
callbacks with them.
We useHooks
cookies to ensure
are you have
a new the best browsing
addition in React experience on our website.
16.8. They By using
let developers use state and
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
other React features without Policywriting a class. Hooks doesn’t violate any
existing React concepts. Instead, Hooks provide a direct API to react
concepts such as props, state, context, refs and life-cycle
The most used hook in React is the useState() hook. It allows functional
components to manipulate DOM elements before each render. Using this
hook we can declare a state variable inside a function but only one state
variable can be declared using a single useState() hook. Whenever the
useState() hook is used, the value of the state variable is changed and the
new variable is stored in a new cell in the stack.
sotc.in Book
The useEffect hook in React eliminates the side effect of using class based
components. It is used as an alternative to componentDidUpdate() method.
The useEffect hook accepts two arguments where second argument is
optional.
useEffect(function, dependency)
The dependency decides when the component will be updated again after
rendering.
We use cookies to ensure you have the best browsing experience on our website. By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
31. What is React Fragments? Policy
when we are trying to render more than one root element we have to put
the entire content inside the ‘div’ tag which is not loved by many developers.
So since React 16.2 version, Fragments were introduced, and we use them
instead of the extraneous ‘div’ tag. The following syntax is used to create
fragment in react.
<React.Fragment>
<h2>Child-1</h2>
<p> Child-2</p>
</React.Fragment>
CSS modules are a way to locally scope the content of your CSS file. We can
create a CSS module file by naming our CSS file as App.modules.css and
then it can be imported inside App.js file using the special syntax mentioned
below.
Syntax:
sotc.in Book
Javascript
Prop drilling is basically a situation when the same data is being sent at
almost every level due to requirements in the final level. The problem with
Prop Drilling is that whenever data from the Parent component will be
needed, it would have to come from each level, Regardless of the fact that it
is not needed there and simply needed in last.
Custom hooks are normal JavaScript functions whose names start with “use”
and they may call other hooks. We use custom hooks to maintain the DRY
concept that is Don’t Repeat Yourself. It helps us to write a logic once and
use it anywhere in the code.
useRef createRef
It is a hook. It is a function.
It uses the same ref throughout. It creates a new ref every time.
The refs created using the useRef can The refs created using the createRef
persist for the entire component can be referenced throughout the
We use cookies to ensure youlifetime.
have the best browsing experience on our website.component.
By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
useRef createRef
There are four fundamental concepts of redux in react which decide how the
data will flow through components
Syntax:
Context API is used to pass global variables anywhere in the code. It helps
when there is a need for sharing state between a lot of nested components.
It is light in weight and easier to use, to create a context just need to call
React.createContext(). It eliminates the need to install other dependencies or
third-party libraries like redux for state management. It has two properties
Provider and Consumer.
axios
fetch
npm i axios
Javascript
return (
<div>
<div>
{counter}
</div>
<div className="buttons">
<button onClick={handleClick1}>
Increment
</button>
<button onClick={handleClick2}>
Decrement
</button>
</div>
</div>
)
}
48. Explain why and how to update state of components using callback?
this.setState(st => {
return(
st.stateName1 = state1UpdatedValue,
st.stateName2 = state2UpdatedValue
)
})
We useReact
cookiesMaterial
to ensure youUIhave
is the
a framework leveraging
best browsing experience React By
on our website. library,
using offering prebuilt
our site, you acknowledge
components forthatcreating
you have read and understood
React our Cookie
applications. Policy & Privacyby Google in 2014,
Developed
Policy
it’s compatible with JavaScript frameworks like Angular.js and Vue.js.
Renowned for its quality designs and easy customization, it’s favored by
developers for rapid development.
Conclusion
For further reading, check out our dedicated article on Advanced ReactJS
Intermediate Interview Questions. Inside, you’ll discover over 20 questions
with detailed answers.
Now get an additional 30% off on all GfG courses of your choice. Also get
90% Course fee refund in just 90 days. Dual savings offer ending soon,
avail today!
“This course was packed with amazing and well-organized content! The
project-based approach of this course made it even better to understand
concepts faster. Also the instructor in the live classes is really good and
knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and
React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
We use cookies to ensure you have the best browsing experience on our website. By using
Suggest improvement
our site, you7 acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
Previous Next
Similar Reads
React Interview Questions and Answers React Redux Interview Questions And
(2024) - Intermediate Level Answers
Top React Components Interview Top React Hooks Interview Questions &
Questions & Answers Answers
S shobhit__… Follow
We use cookies to ensure you have the best browsing experience on our website. By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
A-143, 9th Floor, Sovereign Corporate
Tower, Sector-136, Noida, Uttar Pradesh -
201305
Company Explore
About Us Job-A-Thon Hiring Challenge
Legal Hack-A-Thon
Careers GfG Weekly Contest
In Media Offline Classes (Delhi/NCR)
Contact Us DSA in JAVA/C++
Advertise with us Master System Design
GFG Corporate Solution Master CP
Placement Training Program GeeksforGeeks Videos
Geeks Community
Languages DSA
Python Data Structures
Java Algorithms
C++ DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL DSA Interview Questions
R Language Competitive Programming
Android Tutorial
We use cookies to ensure you have the best browsing experience on our website. By using
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy