Top 50 Frequently asked ReactJS Interview Questions

Q-1. What is React?

Ans-1 React is a front-end JavaScript library which is developed by Facebook in 2011. It follows the component-based approach and allows us to create reusable UI components. It is used to develop complex, interactive web as well as mobile UI. It is open-sourced and has a strong foundation and a large community.

Q-2. What are the features of React?

Ans-2. The features of React includes:

It uses Virtual DOM.
It does the server-side rendering.
It follows unidirectional data flow, i.e., one-way data binding.

Q-3. List some major advantages of React.

Ans-3 The advantages of React are as follows:

It increases application performance.
It is easy to integrate.
It is easy to write UI test cases in React.
React can be used on the client-side as well as on the server-side.

Q-4. What are the limitations of React?

Ans-4 The disadvantages of React are as follows:

It is not a full-scale framework; i.e., it is just a view.
The libraries are quite large.
It is difficult to understand for novice programmers.

Q-5. What is JSX?

Ans-5. JSX is an acronym of 'JavaScript Extension.' It is used to write the JavaScript code that looks like HTML. It has an HTML-like syntax used by react which extends the ECMAScript by which the HTML-like syntax can easily co-exist JavaScript/React code.

Q-6. What are the advantages of using JSX?

Ans-6. There are various advantages of using JSX:

It is faster than JavaScript as it performs optimization during the translation of the code to JavaScript.
It is type-safe because most of the errors are found at compile time.
It makes template creation easy.
It is robust.

Q-7. Is it possible to use React without using JSX?

Ans-7. Yes, JSX is not necessary for using react. It is convenient when you do not require to set up the compilation in your build environment. Every JSX element is just a way to call React.createElement(component,props,…children).

Let us understand it with an example:

Using JSX

class App extends React.Component {
render() {
return Hello {this.props.message};
}
}
ReactDOM.render(
,
document.getElementById('root')
 );

Without Using JSX

class App extends React.Component {
render() {
return React.createElement('div', null, `Welcome ${this.props.message}`);
}
}
ReactDOM.render(
React.createElement(App, {message: 'Back'}, null),
document.getElementById('root')
);

Q-8. What do you understand by Virtual DOM? Explain its working.

Ans-8. Virtual DOM is a light JavaScript object, which is a copy of the real DOM. So, for every object which exists in the original DOM, there is an object for that in React Virtual DOM. Although it is exactly the same, it does not have the power to modify the layout of the document directly.

Virtual DOM works in three steps:

When the underlying data changes, the entire UI is re-rendered in the virtual DOM representations.
Then the difference between the new one and the previous DOM representation is calculated.
Once the calculation gets done, then the real DOM will be updated with the only things that have changed.

Q-9. State the differences between Real DOM and Virtual DOM.

Ans-9. The difference between the virtual DOM and Real DOM are as follows:

Virtual DOM	Real DOM
It updates faster.	It updates slower.
It cannot directly update the HTML.	It can directly update the HTML.
It updates if JSX elements render.	If elements updates, then it creates a new DOM.
There is no expense for DOM manipulation.	DOM manipulation is very expensive.
No Memory wastage.	Too much wastage of memory.

Q-10. Why can browsers not read JSX?

Ans-10. Browsers cannot read JSX because:

JSX is not a regular JavaScript.
Browsers can only read JavaScript objects.
The JSX file is converted to a JS object by using the JSX transformer like Babel before reaching the browser.

Q-11. Sate the difference between React and Angular?

Ans-11. The differences between react and angular are as follows:

Based on	React	Angular
Architecture	View	MVC
DOM	Virtual DOM	Real DOM
Rendering	SSR	CSR
Debugging	Compile-time	Run time
Data Binding	One-way data binding	Two-way data binding
Author	Facebook	Google

Q-12. What are the differences between React and React Native?

Ans-12.

React	React Native
It was initially released in 2013.	It was initially released in 2015.
It is used to develop web applications.	It is used to develop mobile applications.
It can be executed on all platforms.	React is not platform-independent. It takes efforts for the execution on all platforms.
It uses the JavaScript library and CSS for animations.	It comes with built-in libraries of animation.
It uses react-router to navigate web pages.	It has a built-in navigator library to navigate mobile applications.
It uses HTML tags.	It does not use HTML tags.
In React, the virtual DOM renders the browser code.	React Native uses its API to render the code for mobile applications.

Q-13. Explain Props in React?

Ans-13. The prop is an acronym for 'properties.' The props are the read-only components. Props are immutable. Props help to pass data from parent to child component. Props are similar to function arguments, as props are similarly passed to the component as arguments passed in the function. We cannot modify the props inside the component.

Q-14. What is the state in React, and how it is used?

Ans-14. The state is the heart of React components. It must be as simple as possible. It determines the rendering and behavior of components. It creates dynamic and interactive components. It is accessed by this.state(). You can update the state by using this.setState().

For example:

import React from 'react';
class App extends React.Component { 
constructor(props) { 
super(props) 
this.state = { 
message: 'Hello World' 
} 
} 
render() {  
return ( 
 
{this.state.message} 
 
) 
} 
} 
export default App;

Q-15. What are the differences between state and props?

Ans-15. Both state and props are the plain JavaScript objects, but there are some differences between state and props that are as follows:

S.no.	Props	State
1	Immutable.	Mutable.
2	The child component can access them.	The child component cannot access it.
3	They are read-only.	State changes are asynchronous.
4	They allow you to pass the data from one component to other components as an argument.	It holds information about components.
5	The stateless component can have props.	Stateless components cannot have props.
6	Props make components reusable.	The state cannot make components reusable.
7	Props are external.	The State is internal. The component itself controls it.

Q-16. State the difference between super() and super(props) in React using ES6 classes?

Ans-16. When you have to access this.props in the constructor(), then you should pass props to the super() method.

By using super(props):

class App extends React.Component {
constructor(props) {
super(props)
console.log(this.props) // { name: 'Arun', ... }
}
}

By using super():

Class App extends React.Component {
constructor(props) {
super()
console.log(this.props) // undefined
}
}

Outside the constructor(), both will display the same value for this.props.

Q-17. What are the differences between HTML and React event handling?

Ans-17.

1. In HTML the name of the event should be in lowercase:

Whereas the React follows camelCase convention:

2. In HTML, we can return false, for preventing default behaviour:

Whereas in React, you must call the preventDefault() explicitly:

function handleClick(event) {
event.preventDefault()
console.log('You have clicked the link.')
}

3. In HTML, you have to invoke the function by appending braces (), whereas, in React, you should not append the braces () with the function name.

Q-18. State the difference between element and component?

Ans-18. Element: An element is a plain object to describe what you want to appear on the screen in terms of the components or DOM nodes. Elements can contain other elements inside their props. Once the element is created, then it is never mutated.

The object representation of a react element is given below:

const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)

The above React.createElement() function returns the object:

{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}

And finally, it renders to the DOM via ReactDOM.render():

Login

Component: A component can be declared in multiple ways. It can be class with a render() method. In some cases, it can be defined as a function. In either case, it takes the props as an input, and it returns a JSX tree as the output:

const Button = ({ onLogin }) =>
Login

The JSX gets transpiled to React.createElement() function tree:

const Button = ({ onLogin }) => React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)

Q-19. How to create components in React?

Ans-19. There are two ways of creating the component to React:

Functional Components: It is the simplest way of creating the component. These are pure JavaScript functions that accept props object as the first parameter and return the react elements.

function Hello({ message }) {
return {`Hello, ${message}`}
}

Class components: You can use ES6 class for defining a component. The function component can be written as:

class App extends React.Component {
render() {
return {`Hello, ${this.props.message}`} 
}
}

Q-20. What is the difference between the component and container in React redux?

Ans-20. Component: It is a class or function component that describes the presentational part of the application.

Container: It is an informal term for the component that is connected with the redux store. The containers subscribe to Redux state updates and dispatch the actions, and they generally do not render the DOM elements.

Q-21. Why should the name of the component always start with a capital letter?

Ans-21. If you render the component by using JSX, the name of the component should start with the capital letter; otherwise, React will throw an error of unrecognized tag. This convention is because only the HTML elements and the SVG tags can begin with a lowercase letter.

class SomeComponent extends Component {
  // Code goes here
 }

Although you can define the name of the component class with a lowercase letter, you should have to import it with a capital letter.

class myComponent extends Component {
render() {
return 
}
}
 export default myComponent;s

but when imported it in another file, it should start with the capital letter.

import MyComponent from './MyComponent';

Q-22. How to pass numbers to the React component?

Ans-22. You have to pass the numbers by using curly braces ({}) whereas the strings within quotes:

For example:

React.render(, document.getElementById('container'));

Q-23. When to use the class component over a function component?

Ans-23. If the component requires state or lifecycle methods, then use class components otherwise use function components. However, from React 16.8 with the addition of hooks, you can use state, lifecycle methods, and other features that were only available in a class component right in your function component.

Q-24. What are pure components?

Ans-24. Pure components are the fastest and simplest components that we can write. Pure components enhance the simplicity and performance of the application. They are introduced in React 15.3 version. React.PureComponent is same as the React.Component except that it handles the shouldComponentUpdate() method.

Q-25. How can you update the state of the document?

Ans-25. By using this.setState() function, you can change the component's state.

Q-26. What is the arrow function?

Ans-26. Arrow function is also called as ‘fat arrow function (=>)’. It allows binding the context of components properly since auto-binding is not available by default in ES6. It makes it easier to work with higher-order components.

For example:

Without using Arrow functions

render() {
 return ()
 }

By using Arrow functions

render() {
return (this.handleOnChange(e) }  />)
}

Q-27. Difference between Stateful and stateless components.

Ans-27.

Stateful Component	Stateless Component
It has the authority to change state.	It doesn't have the authority to modify the state.
It contains the knowledge of past, present, and possible future changes in state.	It does not know past, present, and possible future changes.
It stores the information about a component's state change in memory.	It calculates the internal state of the components.
Stateless components notify them about the need for changing the state, then they send down the props to them.	Stateless Components receive the props from the Stateful components and treats them as callback functions.

Q-28. Explain the different phases of the React component's lifecycle and list their methods?

Ans-28. There are four phases of the React component’s lifecycle that are as follows:

Initial Phase
Mounting Phase
Updating Phase
Unmounting Phase

1. Initial Phase

It is termed as the birth phase of the lifecycle of a ReactJS component. In this phase, the component includes the initial state and default props.

This phase occurs only once and include the following methods:

getDefaultProps()
getInitialState()

2. Mounting Phase

In this phase, there is the creation of a component’s instance and inserted it into the DOM. It includes the following methods:

componentWillMount()
componentDidMount()
render()

3. Updating Phase

In this phase, we get to change State and new Props. It allows you to handle the interaction with the user and provide communication with the hierarchy of components.

It includes the following methods.

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

4. Unmounting Phase

It is the final phase of the React component lifecycle. This method is called whenever the instance of the component is destroyed and unmounted from the DOM.

This phase includes one method:

componentWillUnmount()

Q-29. Define the lifecycle methods of React.

Ans-29.

getDefaultProps(): It is used for specifying the default value of this.props. It invokes before the creation of the component.
getInitialState(): It is used for specifying the default value of this.state.
componentWillMount(): It invokes immediately before the rendering of a component into the DOM.
componentDidMount(): It invoked immediately after the rendering of a component and placed on the DOM.
componentWillReceiveProps(): It invokes when a component receives new props. If you require updating of the state in response to prop changes, you have to compare this.props and nextProps for performing the state transition by using this.setState() method.
shouldComponentUpdate(): It invokes whenever a component decided to change/update to the DOM. It allows you to control the behavior of the component and to update itself. The component will update when this method returns true. Otherwise, the component will skip updating.
componentWillUpdate(): It invokes just before the occurring of component updation. Here, you cannot change the state of the component by invoking this.setState() method.
componentDidUpdate(): It invokes immediately after the occurring of the component's updating. In this method, you can put any code inside it which you want to execute once the updation is occurred.
componentWillUnmount(): This method invokes immediately before a component is permanently destroyed and unmounted. It performs any necessary cleanup related tasks such as invalidating timers, event listener, canceling network requests, or cleaning up the elements of DOM.

Q-30. What is an event in React?

Ans-30. Events are the triggered reactions to particular actions like mouse hover, mouse click, keypress, etc. React events are similar to HTML, JavaScript events.

Q-31. What do you understand by the refs in React?

Ans-31. Refs stand for 'References.' It is used to return the references to a specific element or component returned by render(). It is used when we require DOM measurements or to add methods to the components.

Q-32. What is the difference between the Controlled and the Uncontrolled components?

Ans-32.

S.no.	Controlled Component	Uncontrolled Component
1	The parent component controls the data.	DOM itself controls the data.
2	There is a validation control.	There is not any validation control.
3	It provides better control over the elements and data of the form.	It provides limited control over the elements and data of the form.
4	It does not maintain the internal state.	It maintains the internal state.
5	It accepts the current value in the form of the prop.	It uses ref for the current values.

Q-33. What are the higher-order components?

Ans-33. Higher-order components are the custom components that wraps another component. They accept dynamically provided child components. They do not modify the input component. They are pure functions and do not copy any behavior from the input component.

Q-34. What can you do with higher-order components?

Ans-34. We can reuse the code, logic, and bootstrap abstraction. You can perform state abstraction, state manipulation, and props manipulation, and also render high jacking.

Q-35. What is the importance of keys to React?

Ans-35. Keys are used for identifying the elements of unique virtual DOM with their corresponding data driving the UI. It helps react to optimize rendering by recycling existing DOM elements. Keys must be unique number or string. Instead of re-rendering with keys, React just re-orders the elements. It increases the Application’s performance.

Q-36. What were the major problems with the MVC framework?

Ans-36. There are some problems with MVC framework that are as follows:

DOM manipulation was very expensive.
Slow and efficient.
Memory wastage.
Because of circular dependencies, the complicated model was created around models and views.

Q-37. Explain Flux.

Ans-37. It is an application architecture that is internally used by Facebook to build the client-web application with react. It is a programming concept, in which the data is unidirectional. It controls the derived data and enables communication between multiple components. It contains a central store that has the authority for all data.

It provides stability to the application. It reduces run-time errors. Any update in the data must occur here only.

Q-38. What is Redux? List down the components of Redux.

Ans-38. Redux is one of the libraries used for front-end development. It is a predictable state container for the applications of JavaScript. The apps that are developed in Redux are easy to test. It helps to write applications that behave consistently and can run in different environments.

The components of the Redux are as follows:

Action: It is an object that describes what happened.
Reducer: It is a place to determine how the state will change.
Store: State/Object tree of the entire application is saved in the store.
View: It simply displays the data which is provided by the store.

Q-39. State and define the three principles that Redux follows?

Ans-39. Redux follows the three principles that are as follows:

Single source of the path: The state of your complete application gets stored in an object tree within the single store. The single state tree makes it easy to keep track of changes over time.
The state is read-only: The only way to modify the state is to emit an action. This ensures that neither views nor network callbacks will ever write directly to the state.
Changes are made with pure functions: For specifying how the state tree transforms by actions, you write the reducers. The Reducers are just pure functions that take the previous state and action by parameters and returns the next state.

Q-40. Explain the role of Reducers.

Ans-40. Reducers are the pure functions that specify how the state of the application changes in response to an action. Reducer determines what sort of update needs to be done based on the type of action, and returns new values. Redux returns the previous state if no work needs to be done.

Q-41. What is the importance of Store in Redux?

Ans-41. A store is the JavaScript object which can hold the state of the application, and it provides some helper methods to access the state, dispatch actions, and register listeners. By using the store, the state data can be synchronized from the server level to the client layer without much hassle. The store makes the development of large applications easier and faster.

Q-42. What are the differences between Redux and Flux?

Ans-42.

Flux	Redux
The store contains the state and change logic.	Store and change logic are separate.
It includes multiple stores.	It includes a single store.
Singleton dispatcher.	No dispatcher.
React components subscribe to the store.	Container components utilize connect.
The state is mutable.	The state is immutable.

Q-43. What are the advantages of Redux?

Ans-43. There are various advantages of redux that are as follows:

Predictability.
Maintainability.
Server-side rendering.
Developer’s tool.
Huge community.
Ease of testing.
Precise organization of code.

Q-44. What is React Router?

Ans-44. It is a powerful routing library. It helps in adding new screens and flows to the application. It keeps the URL in sync with data that is displayed on the web page. It has a simple API.

Q-45. Why is the switch keyword used in React Router V4?

Ans-45. The ‘switch’ keyword is used for displaying only a single route for rendering amongst the several defined routes. The <switch> component is used for rendering the components only when the path will match. Else, it returns to the not found component.

Q-46. Why do we require a router in React?

Ans-46. We need a router to react because it helps in defining multiple routes inside the router with each route leading to a unique view.

Q-47. What are the advantages of the React router?

Ans-47. There are several advantages of React router that are as follows:

APIs are 'All about components.'
It can be visualized as a single root component.
No need to manually set history value.
Separate packages for Web and Native platforms.

Q-48. Explain Error Boundaries.

Ans-48. Error boundaries are the React components that catch the JavaScript errors anywhere in their child component tree, log those errors, and will display a fallback UI rather than the component tree that crashed.

A class will be an error boundary if it defines both of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). The use of static getDerivedStateFromError() is for rendering a fallback UI after an error has been thrown. The use of componentDidCatch() is for logging the error information.

Q-49. How Error Boundaries handled in React V15?

Ans-49. React version 15 provided very basic support for the error boundaries by using the unstable_handleError method. It is renamed to componentDidCatch in React Version 16.

Q-50. What is the difference between Error Boundaries and the try-catch block?

Ans-50. The try-catch block works with the imperative code, whereas the error boundaries are meant for declarative code to render on screen.

For example, the try-catch block for below imperative code:

try {
   showButton();
 } catch (error) {
   // ...
}

Whereas the error boundaries wrap the declarative code as below:

So, if the error occurs in a componentDidUpdate method somewhere deep inside the tree because of setState, it will correctly propagate to the nearest error boundary.

Interview Questions

Top 50 ReactJS Interview Questions for 2022