50 React Interview Questions and Answers for Preparation
Tejasvee Sharma
Dec 01, 2021
React is an important part of javascript so this is a very common topic to be asked in technical questions related to JS. This page will help you to prepare for React Interview Questions. Here we have brought 50+ React Interview questions and answers of different levels for freshers and experienced candidates. So to ace, your job interview prepare from this page.
About React: It is a JavaScript library used for developing user interfaces with declarative, efficient, and flexible features. It works for View “V” in MVC. It is a component-based front-end library that is open-source and works only for the view layer of the application. It is developed and managed by Facebook
1. Explain the difference between Virtual DOM and Real DOM.
Real DOM updates slowly while Virtual DOM updates faster.
Real DOM directly updates HTML whereas Virtual DOM cannot
In Real DOM manipulation is very expensive and in Virtual DOM it is easy
If element updates Real DOM creates a new DOM and Virtual DOM Updates the JSX.
Real DOM does Too much memory wastage whereas Virtual DOM wastes no memory.
2. Explain React?
In 2011 Facebook developed a front-end JavaScript library which is named React. It helps in building the reusable UI components that follow the component-based approach. It makes complex and interactive UI for mobile and web.
3. Tell some features of React?
It majorly uses virtual DOM rather than real DOM.
It uses server-side rendering.
It works on unidirectional data flow or data binding.
4. Tell me some advantages of React.
It enhances the application’s performance
It can use both i.e. client as well as server-side
JSX improves code’s readability
It easily integrates with other frameworks like Angular, Meteor, etc
React makes writing UI test cases very easy
5. Tell me some limitations of React?
It is not a full-blown framework but just a library.
The library is bulky and consumes time in understanding.
For beginner programmers, it is a little difficult to understand.
Inline templating and JSX makes the coding complex.
6. Explain JSX?
It is basically shorthand for XML JavaScript. React use these files to utilize the expressiveness of JavaScript additionally with HTML-like template syntax. It makes the HTML file coding very easy to understand. JSX improves the performance of applications and makes them robust. For example:
render(){
return(
Hello World from JobInterviewNinjas!!
);
}
7. Explain Virtual DOM and its works.
It is a lightweight JavaScript object which in reality is a copy of the real DOM. It is a node tree that makes the lists of all the elements, attributes used, and content as Objects with their properties. React render function is used to develop a node tree out of the React components. After that, it updates the node tree in reply to the mutations in the data model this is due to the various actions done by the user or system.
These are the three simple steps of Virtual DOM working.
Whenever there are changes in underlying data, the entire UI is re-rendered.
Then it calculates the difference between the previous DOM and the new one.
After completing the calculations the real DOM is updated with only those parts that have changed.
8. Why can’t browsers read JSX?
Browsers are only able to read JavaScript objects and JSX is not a JavaScript object. So to make a browser read JSX, we need to convert a JSX file into a JavaScript object by using JSX transformers such as Babel, and then the browser can read it.
9. How is React’s ES6 syntax different from ES5?
require vs import
// ES5
var React = require(‘react’);
// ES6
import React from ‘react’;
export vs exports
// ES5
module.exports = Component;
// ES6
export default Component;
component and function
// ES5
var MyComponent = React.createClass({
render: function() {
return
Hello JobInterviewNinjas!
;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
Hello JobInterviewNinjas!
;
}
}
Props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
Hello, {this.props.name}!
;
}
});
// ES6
class App extends React.Component {
render() {
return
Hello, {this.props.name}!
;
}
}
State
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: ‘world’ };
},
render: function() {
return
Hello, {this.state.name}!
;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: ‘world’ };
}
render() {
return
Hello, {this.state.name}!
;
}
}
10. How is React different from Angular?
Architecture: React is the view part of MVC whereas Angular is a complete MVC.
Rendering: In React it is server-side rendering whereas in Angular it is client-side.
DOM: React uses virtual DOM and Angular uses real DOM.
Data Binding: React uses one-way data binding and Angular uses two-way data binding.
Debugging: React does compile-time debugging and Angular use Runtime Debugging.
Author: React is developed by Facebook and Angular is made by Google.
11. Explain the statement “In React, everything is a component.”
In React application’s UI, Components are the building blocks. These components divide the whole UI into small independent and reusable pieces. Then it individually works on these independent components without disturbing the rest of the UI.
12. Explain the role of render() in React.
All the React components have a render(). It brings back a single React element that represents the native DOM component. If you render two or more HTML elements, then they need to be grouped together inside enclosed in one tag such as
