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
29. Explain controlled and uncontrolled components?
Controlled Components:
They don’t maintain their state
Parent component control the Data
They receive the current values through props and then inform the changes via callbacks
Uncontrolled Components:
They maintain their state
DOM control the Data
Refs are used to fetching their current values
30. Explain Higher-Order Components (HOC)?
It is an innovative way of reusing the component logic. It’s just a pattern that is derivative from React’s compositional nature. Higher-Order Components are custom components that cover another component within it. They can take any dynamically provided child component but they cannot modify or copy any behavior from their input components. You can say that Higher-Order Components (HOC) are ‘pure’ components.
React Interview Questions For Experienced
31. What can you use HOC for?
Code reuse, logic, and bootstrap abstraction
Render High jacking
State abstraction and manipulation
Props manipulation
32. Explain Pure Components?
Pure components are the fastest and simplest written components. They can substitute any component that only has a render(). These components improve the simplicity of the code and enhance the performance of the application.
33. Tell the significance of keys in React?
Keys are used to identifying unique Virtual DOM Elements with their consistent data driving the UI. They help React to well-manage the rendering by reutilizing all the current elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to enhancing the application’s performance.
34. Tell me some major problems with the MVC framework?
DOM manipulation is highly expensive
Applications run slow and are not efficient
There make huge memory wastage
Because of circular dependencies, a complex model is created around models and views
35. What is Flux?
It is a structured pattern that imposes the unidirectional data flow. It manages derived data and allows communication between multiple components by only using a central Store that has access to all data. Any update or changes in data throughout the application must occur in flux only. It gives stability to the application and decreases run-time errors.
36. Explain Redux?
It is one of the most popular libraries used for front-end development. It is an expected state container for JavaScript applications that are used for full application state management. Applications created with Redux can easily be tested and can be run in dissimilar environments showing consistent behavior.
37. Explain the 3 principles that Redux follows?
Single source of truth: The state of the whole application is deposited in an object or state tree within a store. The single state tree makes it convenient to keep track of changes over duration or while debugging or inspecting the application.
The state is read-only: The only way to modify the state is to start an action. An action is a plain JavaScript object telling the change. Same as the state is the nominal representation of data; the action is the nominal representation of the change to the data.
Changes are made with pure functions: To tell how the state tree is altered by actions, you require pure functions. Pure functions are those functions whose return value depends specifically on the values of their arguments.
38. What do you mean by “Single source of truth”?
Redux uses ‘Store’ for keeping the applications whole state in one place. So all the component’s state is deposited in the Store and they collect updates from the Store itself. The single state tree easily tracks the changes for some duration and debug or inspects the application.
39. Explain the components of Redux.
Action: It’s an object that defines what happened.
Reducer: It tells how the state will change.
Store: State/ Object tree of the complete application is collected in the Store.
View: Simply shows the data given by the Store.
40. Define Actions in Redux?
Actions in React do require a type property that shows the type of ACTION being performed. They must be described as a String constant in which you can add more properties. In Redux, actions are made using the functions called Action Creators. For Example:
Reducers are pure functions that tell how the application’s state is changing in reply to an ACTION. Reducers take you to the previous state and action and come with a new state. It defines what kind of update needs to be done depending on the type of the action, and their returning new values. , if no work is done then it returns the previous state as it is.
42. Tell the significance of the Store in Redux?
A store is a JS object which can sustain the application’s state and gives a few helper methods to access the state, dispatch actions, and register listeners. The complete state/ object tree of an application is stored in a single store which results in making Redux very simple and predictable. Middleware is passed to the store to manage the processing of data and to keep a log of several actions that modify the state of stores. All the actions bring back a new state via reducers.
43. Differentiate Redux and Flux?
Flux:
The Store has both state and change logic
Multiple stores are available
All the stores are separated and flat
Has singleton dispatcher
React components subscribe to store
The state is mutable
Redux:
Store and change logic is treated separately
The only single store is available
Single store with hierarchical reducers
No concept of a dispatcher
Container components utilize connect
The state is immutable
44. Tell some advantages of Redux?
Predictability of outcome: As there is only one source of truth, that is the store, so there is no misunderstanding about how to synchronize the current state with actions and different parts of the application.
Maintainability: It is easy to maintain with an expected outcome and strict structure.
Server-side rendering: You require passing the store made on the server, to the client-side. For initial render, it is very useful that provide a better user experience that enhances the application performance.
Developer tools: From actions to state modifications, developers can see everything in real-time of application ongoing.
Community and ecosystem: Redux has a vast community that makes it even more fascinating to use and build a healthy ecosystem.
Ease of testing – Redux’s code mostly contains functions that are pure, small, and isolated which results in making code testable and independent.
Organization – Redux is specific about how code should be organized; which results in making the code more consistent and easy when a team works with it.
45. Explain React Router?
It is a strong routing library built on top of React, which allows you to add new screens and flows to the application. This keeps the URL in synchronization with the data that is shown on the web page. It upholds a standardized architecture and behavior and is used for making single-page web applications. React Router has a simple API.
46. Why is the switch keyword used in React Router v4?
Although a
is used to capture multiple routes in the Router, the ‘switch’ keyword is used when you want to show only one route that needs to be rendered amongst the other defined routes. The tag matches the typed URL with the definite routes in serial order. When the first match is found, it renders the stated route, bypassing the remaining routes.
47. Explain the need for a Router in React?
It is used to define many routes and if a user writes a specific URL, and it matches the path of any ‘route’ defined inside the router, then the user is sent to that specific route. We require a Router library for our app that permits creating different routes with each route leading to us a unique view.
48. Tell the advantages of React Router.
As React depends on components, In React Router v4 the API is ‘All about Components’. A Router can be pictured as a single root component () in which we enfold the particular child routes ().
In React Router v4, we don’t require manually setting History values and all that needs to be done is to wrap our routes within the component.
There are three packages for Web, Native, and Core. The compact size of our application is supported by these packages. It can easily be switched over to a similar coding style.
49. Differentiate between React Router and conventional routing?
Pages Involved: In conventional routing, each view corresponds to a new file, and in react routing only a single HTML page is involved.
URL Changes: In conventional routing, an HTTP request is sent to a server and a matching HTML page is received, and in react routing the History attribute is changed
Feel: In conventional routing, the user navigates across different pages for each view, and in react routing user is duped thinking he is navigating across different pages.
