React Js
React Js
In this Top React Interview Questions article, we’ve covered the Interview
Questions of React 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.
1. What is ReactJS?
AD
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
state of our application, the virtual DOM gets updated first instead of the
real DOM.
We use cookies to ensure you have the best browsing experience on our website. By using
6. you
our site, What is JSX?
acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
JSX is basically a syntax extension of regular JavaScript and is used to create
React elements. These elements are then rendered to the React DOM. All
the React components are written in JSX. To embed any JavaScript
expression in a piece of code written in JSX we will have to wrap that
expression in curly braces {}.
Javascript
const element = (
<h1>
Hello,
{name}.Welcome to GeeksforGeeks.
</h1>
);
We useIncookies to ensure
general, you have the
browsers arebest
notbrowsing experience
capable on our website.
of reading JSX andBy using
only can read pure
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
JavaScript. The web browsers Policy 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
npm start
Javascript
function Component() {
doSomething(e);
{
e.preventDefault();
// Some more response to the event
}
We use cookies to ensure you have the best browsing experience on our website. By using
return <button onEvent={doSomething}></button>;
our site, you acknowledge
} that you have read and understood our Cookie Policy & Privacy
Policy
11. Explain the creation of a List in react?
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
are changed, updated, or deleted. In other words, we can say that keys are
used to give an identity to the elements in the lists.
We use cookies
14. to ensure
Explain theyoudifference
have the best browsing
between experience
React on our
and website. By using
Angular?
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
Field React.js Angular
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
state and return our JSX code to the root component of our app.
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;
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 cookies to ensure you have the best browsing experience on our website. By using
our site,
23.youExplain
acknowledge
thethat you have read andofunderstood
components our Cookie Policy & Privacy
a react-router
Policy
The main components of a react-router are:
We use cookies
26. What to ensure you have the best browsing
is this.setState function experience on our website. By using
in React?
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
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.
Hooks are a new addition in React 16.8. They let developers use state and
other React features without writing 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.
useEffect(function, dependency)
The dependency decides when the component will be updated again after
rendering.
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
We usebelow.
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
Syntax: Policy
import styles from './App.module.css';
npm i styled-components
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.
npm i axios
Javascript
return (
<div>
<div>
We use cookies to ensure you have the best browsing experience on our website. By using
{counter}
our site, you acknowledge that
</div>
you have read and understood our Cookie Policy & Privacy
Policy
<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 use cookies to ensure you have the best browsing experience on our website. By using
Conclusion
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
This compilation of React Interview Questions and Answers covers a wide
range of topics, from basic concepts to advanced techniques. Whether you’re
a beginner or an experienced developer, mastering these questions will
enhance your readiness for React interviews and boost your confidence.
For further reading, check out our dedicated article on Advanced ReactJS
Intermediate Interview Questions. Inside, you’ll discover over 20 questions
with detailed answers.
“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.
7 Suggest improvement
Previous Next
Similar Reads
React Interview Questions and Answers React Redux Interview Questions And
(2024) - Intermediate Level Answers
Top React
We use cookies Components
to ensure you have theInterview Top
best browsing experience on ourReact Hooks
website. Interview Questions &
By using
Questions & Answers Answers
our site, you acknowledge that you have read and understood our Cookie Policy & Privacy
Policy
Top 50 TCP/IP interview questions and jQuery Interview Questions and
answers Answers | Set-2
S shobhit__…
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
We use cookies to ensure youJava
have the best browsing experience on our website. By usingAlgorithms
our site, you acknowledge thatC++ DSA for Beginners
you have read and understood our Cookie Policy & Privacy
PHP Policy 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
UPSC Study Material Preparation Corner
Polity Notes Company-Wise Recruitment Process
Geography Notes Resume Templates
History Notes Aptitude Preparation
Science and Technology Notes Puzzles
Economy Notes Company-Wise Preparation
Ethics Notes Companies
Previous Year Papers Colleges
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