React JS Interview Questions and Answers

React JS questions with answers for preparing for job interviews, online tests, exams, and certifications. These React JS questions and answers include various topics. And are taken from a real written interview and some parts are live. This systematic learning method will easily prepare anyone to pass their test on React JS.

Prepare yourself with this list of frequently asked questions on “React JS” so that you can answer them with confidence.

1. What is React?

React is a front-end JavaScript library developed by Facebook in 2011.
It follows the component-based approach that helps to create reusable UI components.
It is used to develop a complex and interactive web and mobile user interface.
Even though it was only open source in 2015, it has one of the largest communities supporting it.

2. What are React’s features?

The main features of React are listed below:

It uses the virtual DOM instead of the real DOM.
It uses server-side rendering.
It follows the unidirectional data flow or data-binding.

3. What is the difference between the real DOM and virtual DOM.

Real DOM	Virtual DOM
It is slowly updating.	It updates faster.
Can directly update the HTML.	Impossible to update directly the HTML.
Creates a new DOM if the element is updated.	Update JSX if the element is updated.
DOM handling is very costly.	DOM manipulation is very easy.
There is a memory loss.	No memory loss.

4. List some of the main advantages of React.

Some of the main advantages of React are the following:

It increases the performance of the application
It can be easily used on the client side as well as the server side
Thanks to JSX, the readability of the code increases
React is easy to integrate with other frameworks like Meteor, Angular, etc.
Using React, writing user interface tests becomes extremely easy

5. What are React’s limitations?

The limitations of React are listed below:

React is just a library, not a complete framework
Its library is very large and takes time to understand
It can be difficult for beginner programmers to understand
Coding becomes complex because it uses inline templates and JSX

6. What is JSX?

JSX stands for JavaScript XML. It is a file type used by React that uses the expressiveness of JavaScript with HTML. This file makes applications robust and increases its performance. Here is an example of JSX:

render(){
    return(
		<div>
			<p>Welcome to StackHowTo!</p>
		</div>
    );
}

7. Explain how the virtual DOM works.

Virtual DOM is a lightweight JavaScript object that is originally just a copy of the real DOM. It is a tree of nodes that lists the elements, their attributes, and contents as objects and their properties. React’s render function creates a tree of nodes from React components. It then updates this tree in response to mutations in the data model that are caused by various actions performed by the user or by the system.

This virtual DOM works in three simple steps.
1. Whenever data changes, the entire user interface is rendered in virtual DOM.

2. Then the difference between the previous DOM representation and the new one is calculated.

3. Once the calculations are done, the real DOM will be updated with only the things that have changed.

8. Why browsers can’t read JSX?

Browsers can only read JavaScript objects but JSX is not a standard JavaScript object. So, to allow a browser to read JSX, we must first transform the JSX file into a JavaScript object using JSX transformers like Babel, and then pass it to the browser.

9. What is the role of the create-react-app command?

The “create-react-app” command used in the CLI (command line interface) allowing React to create applications without build configuration.

create-react-app myApp

10. What is the render() method in React? And explain its purpose?

Each React component must have the render() method. It returns a single React element which is the representation of the native DOM component. If multiple HTML elements are to be rendered, they must be grouped in a wrapper 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.

11. What is the difference between React Native and React?

React is a JavaScript library, supporting both front-end and back-end (running on the server), for creating user interfaces and web applications.

While, React Native is a mobile framework that compiles into native application components, allowing us to create native mobile applications (iOS, Android, and Windows) in JavaScript that allows us to use ReactJS to build our components and implements ReactJS.

With React Native, it is possible to mimic the behavior of a native application in JavaScript, and in the end, we will get a platform-specific code as output. We can even mix native code with JavaScript if we need to further optimize our application.

12. What is Props?

Props is the abbreviation for Properties in React. These are read-only components that must be kept pure, i.e. immutable. They are always passed from the parent component to the child components throughout the application. A child component can never send a Props back to the parent component. This helps to keep the data flow unidirectional and is generally used to return dynamically generated data.

13. What is the State object used for in React and how is it used?

States are at the heart of React’s components. States are the source of data and should be as simple as possible. Generally, States are objects that determine the rendering and behavior of components. They are mutable unlike Props and create dynamic and interactive components. They are accessible via this.state().

14. What can you do with HOC?

HOC can be used for many tasks like:

Code reuse, logic and bootstrap abstraction
Abstraction and manipulation of State
Handling of Props
Render High jacking

15. What are the pure components?

Pure components are the simplest and fastest components that can be written. They can replace any component that has only one render() method. These components improve the simplicity of the code and the performance of the application.