1) What is React?

React is a declarative, efficient, flexible open source front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach for building reusable UI components, especially for single page application. It is used for developing interactive view layer of web and mobile apps. It was created by Jordan Walke, a software engineer at Facebook. It was initially deployed on Facebook’s News Feed section in 2011 and later used in its products like WhatsApp & Instagram.

For More Information, Click here.

2) What are the features of React?

React framework gaining quick popularity as the best framework among web developers. The main features of React are:

  • JSX
  • Components
  • One-way Data Binding
  • Virtual DOM
  • Simplicity
  • Performance

For More Information, Click here.

3) What are the most crucial advantages of using React?

Following is a list of the most crucial advantages of using React:

React is easy to learn and use

React comes with good availability of documentation, tutorials, and training resources. It is easy for any developer to switch from JavaScript background to React and easily understand and start creating web apps using React. Anyone with little knowledge of JavaScript can start building web applications using React.

React follows the MVC architecture.

React is the V (view part) in the MVC (Model-View-Controller) architecture model and is referred to as “one of the JavaScript frameworks.” It is not fully featured but has many advantages of the open-source JavaScript User Interface (UI) library, which helps execute the task in a better manner.

React uses Virtual DOM to improve efficiency.

React uses virtual DOM to render the view. The virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, with the use of virtual DOM, the efficiency of the app improves. That’s why React provides great efficiency.

Creating dynamic web applications is easy.

In React, creating a dynamic web application is much easier. It requires less coding and gives more functionality. It uses JSX (JavaScript Extension), which is a particular syntax letting HTML quotes and HTML tag syntax to render particular subcomponents.

React is SEO-friendly.

React facilitates a developer to develop an engaging user interface that can be easily navigated in various search engines. It also allows server-side rendering, which is also helpful to boost the SEO of your app.

React allows reusable components.

React web applications are made up of multiple components where each component has its logic and controls. These components provide a small, reusable piece of HTML code as an output that can be reused wherever you need them. The code reusability helps developers to make their apps easier to develop and maintain. It also makes the nesting of the components easy and allows developers to build complex applications of simple building blocks. The reuse of components also increases the pace of development.

Support of handy tools

React provides a lot of handy tools that can make the task of the developers understandable and easier. Use these tools in Chrome and Firefox dev extension, allowing us to inspect the React component hierarchies in the virtual DOM. It also allows us to select the particular components and examine and edit their current props and state.

React has a rich set of libraries.

React has a huge ecosystem of libraries and provides you the freedom to choose the tools, libraries, and architecture for developing the best application based on your requirement.

Scope for testing the codes

React web applications are easy to test. These applications provide a scope where the developer can test and debug their codes with the help of native tools.

For More Information, Click here.

4) What are the biggest limitations of React?

Following is the list of the biggest limitations of React:

  • React is just a library. It is not a complete framework.
  • It has a huge library which takes time to understand.
  • It may be difficult for the new programmers to understand and code.
  • React uses inline templating and JSX, which may be difficult and act as a barrier. It also makes the coding complex.

5) What is JSX?

JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.


  1. class App extends React.Component {  
  2.   render() {  
  3.     return(  
  4.       <div>  
  5.         <h1>Hello JavaTpoint</h1>  
  6.       </div>  
  7.     )  
  8.   }  
  9. }  

In the above example, text inside <h1> tag return as JavaScript function to the render function. After compilation, the JSX expression becomes a normal JavaScript function, as shown below.

  1. React.createElement(“h1”null“Hello JavaTpoint”);  

For More Information, Click here.

6) Why can’t browsers read JSX?

Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.

7) Why we use JSX?

  • It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
  • Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both.
  • t is type-safe, and most of the errors can be found at compilation time.
  • It makes easier to create templates.

8) What do you understand by Virtual DOM?

A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.

9) Explain the working of Virtual DOM.

Virtual DOM works in three steps:

1. Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.

React Interview Questions1

2. Now, the difference between the previous DOM representation and the new DOM is calculated.

React Interview Questions2

3. Once the calculations are completed, the real DOM updated with only those things which are changed.

React Interview Questions3

10) How is React different from Angular?

The React is different from Angular in the following ways.

AuthorGoogleFacebook Community
DeveloperMisko HeveryJordan Walke
Initial ReleaseOctober 2010March 2013
LanguageJavaScript, HTMLJSX
TypeOpen Source MVC FrameworkOpen Source JS Framework
DOMRegular DOMVirtual DOM
TestingUnit and Integration TestingUnit Testing
App ArchitectureMVCFlux
PerformanceSlowFast, due to virtual DOM.

For More Information, Click here.

11) How React’s ES6 syntax is different from ES5 syntax?

The React’s ES6 syntax has changed from ES5 syntax in the following aspects.

require vs. Import

  1. // ES5  
  2. var React = require(‘react’);  
  4. // ES6  
  5. import React from ‘react’;  

exports vs. export

  1. // ES5  
  2. module.exports = Component;  
  4. // ES6  
  5. export default Component;  

component and function

  1. // ES5  
  2. var MyComponent = React.createClass({  
  3.     render: function() {  
  4.         return(  
  5.           <h3>Hello JavaTpoint</h3>  
  6.         );  
  7.     }  
  8. });  
  10. // ES6  
  11. class MyComponent extends React.Component {  
  12.     render() {  
  13.         return(  
  14.           <h3>Hello Javatpoint</h3>  
  15.         );  
  16.     }  
  17. }  


  1. // ES5  
  2. var App = React.createClass({  
  3.     propTypes: { name: React.PropTypes.string },  
  4.     render: function() {  
  5.         return(  
  6.            <h3>Hello, {this.props.name}!</h3>  
  7.         );  
  8.     }  
  9. });  
  11. // ES6  
  12. class App extends React.Component {  
  13.     render() {  
  14.         return(  
  15.           <h3>Hello, {this.props.name}!</h3>  
  16.         );  
  17.     }  
  18. }  


  1. var App = React.createClass({  
  2.     getInitialState: function() {  
  3.         return { name: ‘world’ };  
  4.     },  
  5.     render: function() {  
  6.         return(  
  7.           <h3>Hello, {this.state.name}!</h3>  
  8.         );  
  9.     }  
  10. });  
  12. // ES6  
  13. class App extends React.Component {  
  14.     constructor() {  
  15.         super();  
  16.         this.state = { name: ‘world’ };  
  17.     }  
  18.     render() {  
  19.         return(  
  20.           <h3>Hello, {this.state.name}!</h3>  
  21.         );  
  22.     }  
  23. }  

12) What is the difference between ReactJS and React Native?

The main differences between ReactJS and React Native are given below.

SNReactJSReact Native
1.Initial release in 2013.Initial release in 2015.
2.It is used for developing web applications.It is used for developing mobile applications.
3.It can be executed on all platforms.It is not platform independent. It takes more effort to be executed on all platforms.
4.It uses a JavaScript library and CSS for animations.It comes with built-in animation libraries.
5.It uses React-router for navigating web pages.It has built-in Navigator library for navigating mobile applications.
6.It uses HTML tags.It does not use HTML tags.
7.In this, the Virtual DOM renders the browser code.In this, Native uses its API to render code for mobile applications.

For More Information, Click here.

13) What is the difference between Real DOM and Virtual DOM?

The following table specifies the key differences between the Real DOM and Virtual DOM:

The real DOM creates a new DOM if the element updates.

Real DOMVirtual DOM
The real DOM updates slower.The virtual DOM updates faster.
The real DOM can directly update HTML.The virtual DOM cannot directly update HTML.
The virtual DOM updates the JSX if the element updates.
In real DOM, DOM manipulation is very expensive.In virtual DOM, DOM manipulation is very easy.
There is a lot of memory wastage in The real DOM.There is no memory wastage in the virtual DOM.

React Component Interview Questions

14) What do you understand from “In React, everything is a component.”

In React, components are the building blocks of React applications. These components divide the entire React application’s UI into small, independent, and reusable pieces of code. React renders each of these components independently without affecting the rest of the application UI. Hence, we can say that, in React, everything is a component.

15) Explain the purpose of render() in React.

It is mandatory for each React component to have a render() function. Render function is used to return the HTML which you want to display in a component. If you need to rendered more than one HTML element, you need to grouped together inside single enclosing tag (parent tag) such as <div>, <form>, <group> etc. This function returns the same result each time it is invoked.

Example: If you need to display a heading, you can do this as below.

  1. import React from ‘react’  
  3. class App extends React.Component {  
  4.    render (){  
  5.       return (  
  6.          <h1>Hello World</h1>  
  7.       )  
  8.    }  
  9. }  
  10. export default App  

Points to Note:

  • Each render() function contains a return statement.
  • The return statement can have only one parent HTML tag.

16) How can you embed two or more components into one?

You can embed two or more components into the following way:

  1. import React from ‘react’  
  3. class App extends React.Component {  
  4.    render (){  
  5.       return (  
  6.          <h1>Hello World</h1>  
  7.       )  
  8.    }  
  9. }  
  11. class Example extends React.Component {  
  12.    render (){  
  13.       return (  
  14.          <h1>Hello JavaTpoint</h1>  
  15.       )  
  16.    }  
  17. }  
  18. export default App  

17) What is Props?

Props stand for “Properties” in React. They are read-only inputs to components. Props are an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from the parent to the child components throughout the application.

It is similar to function arguments and passed to the component in the same way as arguments passed in a function.

Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.

For More Information, Click here.

18) What is a State in React?

The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.

Let’s create a “User” component with “message state.”

  1. import React from ‘react’  
  3. class User extends React.Component {  
  4.   constructor(props) {  
  5.     super(props)  
  7.     this.state = {  
  8.       message: ‘Welcome to JavaTpoint’  
  9.     }  
  10.   }  
  12.   render() {  
  13.     return (  
  14.       <div>  
  15.         <h1>{this.state.message}</h1>  
  16.       </div>  
  17.     )  
  18.   }  
  19. }  
  20. export default User  

For More Information, Click here.

19) Differentiate between States and Props.

The major differences between States and Props are given below.

1.Props are read-only.State changes can be asynchronous.
2.Props are immutable.State is mutable.
3.Props allow you to pass data from one component to other components as an argument.State holds information about the components.
4.Props can be accessed by the child component.State cannot be accessed by child components.
5.Props are used to communicate between components.States can be used for rendering dynamic changes with the component.
6.The stateless component can have Props.The stateless components cannot have State.
7.Props make components reusable.The State cannot make components reusable.
8.Props are external and controlled by whatever renders the component.The State is internal and controlled by the component itself.

For More Information, Click here.

20) How can you update the State of a component?

We can update the State of a component using this.setState() method. This method does not always replace the State immediately. Instead, it only adds changes to the original State. It is a primary method which is used to update the user interface(UI) in response to event handlers and server responses.


  1. import React, { Component } from ‘react’;  
  2. import PropTypes from ‘prop-types’;  
  4. class App extends React.Component {  
  5.    constructor() {  
  6.       super();        
  7.       this.state = {  
  8.           msg: “Welcome to JavaTpoint”  
  9.       };      
  10.       this.updateSetState = this.updateSetState.bind(this);  
  11.    }  
  12.    updateSetState() {  
  13.        this.setState({  
  14.           msg:“Its a best ReactJS tutorial”  
  15.        });  
  16.    }  
  17.    render() {  
  18.       return (  
  19.          <div>  
  20.              <h1>{this.state.msg}</h1>  
  21.              <button onClick = {this.updateSetState}>SET STATE</button>  
  22.          </div>  
  23.       );  
  24.    }  
  25. }  
  26. export default App;  

Shubham Patil

Typically replies within a day

Powered by WpChatPlugins

Learn to code by doing. Try hands-on Coding with RLchats PRO.