React JS Interview Question & Answer

React JS Trend 2019
The image provides
summary statistics for
permanent job vacancies
with a requirement for
React skills. Included is a
benchmarking guide to the
salaries offered in vacancies
that have cited React over
the 6 months to 29 August
2019 with a comparison to
the same period in the
previous 2 years.

React JS Trend 2019
This chart provides
the 3-month moving
average for salaries
quoted in permanent
IT jobs citing React.

Interview Question
Let us start by taking a look at some of the most
frequently asked React JS interview questions:

React JS Interview Question
Q1. What is React?
● React is a front-end JavaScript library developed by Facebook in
2011.
● It follows the component based approach which helps in building
reusable UI components.
● It is used for developing complex and interactive web and mobile
UI.
● Even though it was open-sourced only in 2015, it has one of the
largest communities supporting it.

Q2. What are the features of React?
Major features of React are listed below:
● It uses the virtual DOM instead of the real DOM.
● It uses server-side rendering.
● It follows uni-directional data flow or data binding.

Q3. List some of the major advantages of React.
Some of the major advantages of React are:
● It increases the application’s performance
● It can be conveniently used on the client as well as server side
● Because of JSX, code’s readability increases
● React is easy to integrate with other frameworks like Meteor,
Angular, etc
● Using React, writing UI test cases become extremely easy

Q4. What are the limitations of React?
Limitations of React are listed below:
● React is just a library, not a full-blown framework
● Its library is very large and takes time to understand
● It can be little difficult for the novice programmers to understand
● Coding gets complex as it uses inline templating and JSX

Q5. How React works? How Virtual-DOM works in React?
React creates a virtual DOM. When state changes in a component it firstly
runs a “diffing” algorithm, which identifies what has changed in the virtual
DOM. The second step is reconciliation, where it updates the DOM with the
results of diff.
The HTML DOM is always tree-structured — which is allowed by the
structure of HTML document. The DOM trees are huge nowadays because of
large apps.
The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and
detached from the browser-specific implementation details.

Q6. Differentiate between Real DOM and Virtual DOM.
Real DOM Virtual DOM
1. It updates slow. 1. It updates faster.
2. Can directly update HTML. 2. Can’t directly update HTML.
3. Creates a new DOM if element updates. 3. Updates the JSX if element updates.
4. DOM manipulation is very expensive. 4. DOM manipulation is very easy.
5. Too much of memory wastage. 5. No memory wastage.

Q7. What is JSX?
JSX is a syntax extension to JavaScript and comes with the full power of
JavaScript. JSX produces React “elements”. You can embed any JavaScript
expression in JSX by wrapping it in curly braces.
For example, below is the syntax for a basic element in React with JSX and its equivalent without it.

Equivalent of the above using React.createElement

Q8. What is React.createClass?
React.createClass allows us to generate component “classes.” But with ES6,
React allows us to implement component classes that use ES6 JavaScript
classes. The end result is the same — we have a component class. But the
style is different. And one is using a “custom” JavaScript class system
(createClass) while the other is using a “native” JavaScript class system.

When using React’s createClass() method, we pass in an object as an argument.
So we can write a component using createClass that looks like this:

Using an ES6 class to write the same component is a little different. Instead of
using a method from the react library, we extend an ES6 class that the library
defines, Component.

Q9. How is React different from Angular?
TOPIC REACT ANGULAR
1. ARCHITECTURE Only the View of MVC Complete MVC
2. RENDERING Server-side rendering Client-side rendering
3. DOM Uses virtual DOM Uses real DOM
4. DATA BINDING One-way data binding Two-way data binding
5. DEBUGGING Compile time debugging Runtime debugging
6. AUTHOR Facebook Google

Q10. What are the differences between a class component and functional
component?
Class components allows us to use additional features such as local state
and lifecycle hooks. Also, to enable our component to have direct access to
our store and thus holds state.
When our component just receives props and renders them to the page, this
is a ‘stateless component’, for which a pure function can be used. These are
also called dumb components or presentational components.

Q11. What is the difference between state and props?
The state is a data structure that starts with a default value when a
Component mounts. It may be mutated across time, mostly as a result of
user events.
Props (short for properties) are a Component’s configuration. Props are how
components talk to each other. They are received from above component
and immutable as far as the Component receiving them is concerned. A
Component cannot change its props, but it is responsible for putting together
the props of its child Components. Props do not have to just be data —
callback functions may be passed in as props.

Q12. What are controlled components?
In HTML, form elements such as <input>, <textarea>, and <select>typically
maintain their own state and update it based on user input. When a user
submits a form the values from the aforementioned elements are sent with
the form. With React it works differently. The component containing the form
will keep track of the value of the input in it’s state and will re-render the
component each time the callback function e.g. onChange is fired as the
state will be updated. A form element whose value is controlled by React in
this way is called a “controlled component”.

Q13. What are the different phases of React component’s lifecycle?
There are three different phases of React component’s lifecycle:
● Initial Rendering Phase: This is the phase when the component is
about to start its life journey and make its way to the DOM.
● Updating Phase: Once the component gets added to the DOM, it can
potentially update and re-render only when a prop or state change
occurs. That happens only in this phase.
● Unmounting Phase: This is the final phase of a component’s life cycle
in which the component is destroyed and removed from the DOM.

Q14. What is Redux?
The basic idea of Redux is that the entire application state is kept in a single
store. The store is simply a javascript object. The only way to change the
state is by firing actions from your application and then writing reducers for
these actions that modify the state. The entire state transition is kept inside
reducers and should not have any side-effects.
Redux is based on the idea that there should be only a single source of truth
for your application state, be it UI state like which tab is active or Data state
like the user profile details.

Q15. What is render() in React? And explain its purpose?
Each React component must have a render() mandatorily. It returns a single
React element which is the representation of the native DOM component. If
more than one HTML element needs to be rendered, then they must be
grouped together inside one enclosing tag such as <form>, <group>, <div>
etc. This function must be kept pure i.e., it must return the same result each
time it is invoked.

Q16. What are controlled and uncontrolled components in React?
This relates to stateful DOM components (form elements) and the difference:
● A Controlled Componentis one that takes its current value through
props and notifies changes through callbacks like onChange. A parent
component “controls” it by handling the callback and managing its own
state and passing the new values as props to the controlled component.
You could also call this a “dumb component”.

Q17. Explain the components of Redux.
Redux is composed of the following components:
● Action— Actions are payloads of information that send data from our
application to our store. They are the only source of information for the
store. We send them to the store using store.dispatch(). Primarly, they
are just an object describes what happened in our app.

● Reducer— Reducers specify how the application’s state changes in
response to actions sent to the store. Remember that actions only
describe what happened, but don’t describe how the application’s state
changes. So this place determines how state will change to an action.

● Store — The Store is the object that brings Action and Reducer
together. The store has the following responsibilities: Holds application
state; Allows access to state via getState(); Allows state to be updated
viadispatch(action); Registers listeners via subscribe(listener); Handles
unregistering of listeners via the function returned bysubscribe(listener).

Q18. What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being run on
the server, for building user interfaces and web applications.
On the other hand, React Native is a mobile framework that compiles to
native app components, allowing us to build native mobile applications (iOS,
Android, and Windows) in JavaScript that allows us to use ReactJS to build
our components, and implements ReactJS under the hood.

Q19. What are the advantages of Redux?
Advantages of Redux are listed below:
● Predictability of outcome – Since there is always one source of truth,
i.e. the store, there is no confusion about how to sync the current state
with actions and other parts of the application.
● Maintainability – The code becomes easier to maintain with a
predictable outcome and strict structure.
● Developer tools – From actions to state changes, developers can track
everything going on in the application in real time.

Q20. List down the advantages of React Router.
Few advantages are:
● Just like how React is based on components, in React Router v4, the
API is ‘All About Components’. A Router can be visualized as a single
root component (<BrowserRouter>) in which we enclose the specific
child routes (<route>).

Few advantages are:
● No need to manually set History value: In React Router v4, all we need
to do is wrap our routes within the <BrowserRouter> component.
● The packages are split: Three packages one each for Web, Native and
Core. This supports the compact size of our application. It is easy to
switch over based on a similar coding style.

I hope this set of React Interview Questions and Answers will help you in
preparing for your interviews. All the best!
If you want to get trained in React and wish to
develop interesting UI’s on your own, then
check out the ReactJS with Redux Certification
Training by MildainTrainings, a trusted online
learning company with a network of more than
50,000 satisfied learners spread across the
globe.

Thank You
For more information please visit our website
https://mildaintrainings.com/

React JS Interview Question & Answer

Recommended

More Related Content

What's hot (20)

Similar to React JS Interview Question & Answer (20)

Recently uploaded (20)

React JS Interview Question & Answer