Top 75+ React Js Interview Questions

Are you preparing for your dream job interview as a React developer? If your answer is yes, you must know the time it takes to master the interviews. Here is a list of React JS interview questions for freshers, experienced, and professionals who are prepping up for job interviews. We hope these questions and answers will be helpful for you to get the best job in the industry. This blog will conclude the answers to all the top React interview questions so that your concepts are entirely clear. The blog is categorized into three sections: React interview questions for Freshers/ Intermediate/ Experienced Level.

Basic React JS Interview Questions

Q1: What is React?

Ans: React is an effective, semantic, and flexible open-source front-end Javascript library built by Facebook in 2011. It is used to create web browser applications, dynamic libraries, and form UI’s that are provisioned with large datasets. In simple words, it is primarily used for front-end development. It is one of the most basic ReactJS interview questions and answers that you should know.

Q2: What are the top features of React?

Ans: React has numerous features that are used for multiple purposes. Some of the essential ones are:

• Virtual DOM: Virtual DOM is an eminent programming concept, which is a virtual representation of  a UI. It is stored in memory and synchronized with the real DOM by a library, for example ReactDOM.  This whole process is known as reconciliation, which enables the declarative API of React.
• Component-based architecture: Components-based architecture is highly centered on the atomization of the design into the logical components that shows well-explained communication interfaces. It includes numerous methods, properties, and events. The main objective of this feature is to ensure component reusability. There are several standard component frameworks such as JAVABean, EJB, COM/DCOM, .NET, grid services, CORBA, and web services.
• JSX: It is a markup language that explains the appearance of the application’s interface. It makes the syntax like HTML, which is used to build React components by web developers. Nonetheless, JSX is one of the prominent features of React JS because it makes it easy for the developers to write coding blocks.

Q3: What are the advantages of React JS?

Ans: Some of the top advantages of using React JS are as follow:

It is easy to learn and use

It has various documentation, training resources, and tutorials available. It is easy for any beginner developer to use ReactJs as JavaScript Framework. It is easy to understand and helps in creating web applications.

It follows the MVC architecture

React is the view part, also known as V in the MVC, the Model-View-Controller architectural model. It is considered as one of the JavaScript frameworks. However, it is not entirely featured but has numerous advantages of the open-source JavaScript User Interface (UI) library that helps implement the task efficiently.

It helps in creating dynamic web applications easily

Creating dynamic web applications is entirely easy in Reactjs. It asks for less coding and offers more functionality. It uses JavaScript Extension, which is a certain syntax letting HTML quotes and HTML tag syntax offer particular divisions.

Q4: Explain JSX.

Ans: JSX full form is JavaScript XML, a React Extension that permits writing JavaScript code, which looks similar to HTML. It makes the HTML file easy to comprehend. The JSX file makes the React application powerful and boosts its performance. It offers to write XML-like syntax in the same file where the JavaScript code is written, and then the processor transmits these expressions to real JavaScript code.

In this Example, the values of x and y variables are defined in export default App() and  h1 and h2 tags are used to display the text in return.

Example:

export default function App() {
let x = "welcome Home";
let y = "Read more about ReactJs ";
return (
<div className="App">
<h1>{x}</h1>
<h2>{y}</h2>
</div>
);
}

Q5: What is the term Virtual DOM?

Ans: A Virtual DOM is a programming concept where the UI representation is kept virtual in a memory card and synchronized with the real DOM by a library such as ReactDOM. This procedure is called reconciliation. In simple words, it is an intermediary step between the render process being called and displaying the elements on the screen.

Q6: Mention the difference between Real DOM and Virtual DOM?

Ans: Here are the fundamental differences between Real DOM and the Virtual DOM:

Real DOM	Virtual DOM
It takes all the HTML elements and keeps them in a tree-like structured object.	It has similar features like Real DOM object it cannot write and display things on the screen as Real DOM.
It updates slowly.	It updates faster.
Manipulation is slow.	Manipulation is comparatively faster because nothing is shown on the screen.
Real DOM has more memory wastage.	It has no memory wastage.
It shows the document as nodes and objects.	It is a lightweight copy of Real DOM.

Q7: What is ECMAScript?

Ans: ECMAScript stands for European Computer Manufacturers Association Script. It is a scripting language that is based on JavaScript, which is built by Brendan Eich at Netscape. It firstly appeared in the Navigator 2.0 browser, which later started appearing in popular browser versions of Netscape along with others.

Q8: Difference Between ES6 and ES5 Standards?

Ans: Here are the fundamental differences between ES5 and ES6 standards.

ES5	ES6
It keeps up with primitive data forms that are boolean, string, number, undefined, and null.	There are multiple additions to JavaScript data forms. It has introduced a primitive data type ‘symbol’ for keeping up with unique values.
Variables can be defined in only one way that is by using var keyword.	Variables can be defined in two new ways that are let and const.
Object manipulation takes more time in ES5.	Object manipulation takes less time in ES6.
Both return keywords and functions are used to define a function in ES5.	There is a new function in ES6 known as arrow function that does not need a function keyword to define a function.
It offers a bigger range of community support than that of Es6.	It offers a smaller range of community support than that of ES5.

Q9: What is an event in React?

Ans:  An event is defined as an action that a user or system may set off, which can be a mouse click, pressing a key, and more. The React events are named by using the camelCase instead of lowercase in HTML. Whereas, with JSX, a function is passed as the event handler instead of a string in HTML.

Q10: Types of Events in React?

Ans: Here are the types of events inreact and its supported events.

Event Group	Events Supported By React
Keyword Events	onKeyDown, onKeyPress, onKeyUp
Mouse events	onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp
Clipboard events	onCopy, onCut, onPaste
Form events	onChange, onInput, onSubmit
Focus events	onFocus, onBlur
UI events	onScroll
Touch events	onTouchCancel, onTouchEnd, onTouchMove, onTouchStart
Wheel events	onWheel
Selection events	onSelect
Animation events	onAnimationStart, onAnimationEnd, onAnimationIteration
Image events	onLoad, onError
Transition events	onTransitionEnd

Q11: What is React.createClass?

Ans:

Javascript didn’t have any classes, that’s why React included its own class system in which React.createClass is a module that permits the developers to generate component classes.

import React from 'react';

const List = React.createClass({
render() {
return (
<div></div>
);
}
});

Usually with ES6, React allows you to Implement ES6 JavaScript Classes.

import React from 'react';

class List extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}

export default List;

Q12: How to create a component in React?

Ans: There are two ways to create a component in React:

Function Components: It is one of the simplest ways to create a component in React. It is considered the pure JavaScript function that permits props object as the first parameter and returns React elemental.

Function Greeting({ message }) {
Return <h1>{"Hello, ${message}"}</h1>
}

Class Components: The class components method clears the ways to use ES6 class to define components.

Class Greeting extends React.Component {
render () {
Return <h1>{"Hello, ${this.props.message}"}</h1>
}
}

Q13: Explain the different phases of React component’s lifecycle.

Ans: Here are the different phases of React component’s lifecycle:

• Initial Phase: The initial phase of the React lifecycle where the component starts its drive on the way to the DOM. In this process, a component concludes the default Props and initial State. These default properties are done in the producer of a component.
• Mounting Phase: A component is created and added to the DOM in this process.
• Updating Phase: In this process of the react cycle, new props and change states are formed. It can be updated in future and re-render when a prop or state change occurs. The main purpose of this phase is to ensure that the component is showing the latest version. However, it is a repeated phase that will occur repeatedly.
• Unmounting Phase: The last stage of the react lifecycle, where the component example is destroyed and removed from the DOM.

Q14: Why is it important to start component names with capital letters?

Ans: It is important to start component names with capital letters because if they start with lowercase, it will show an unrecognized error. It happens because the lowercase tag names are referred to as HTML tags. Mark this as one of the important React interview questions.

Q15: Differentiate between Class and Functional Components?

Ans: Here the significant differences between Class and Functional Components:

Class-Based Components	Functional Components
It demands a render() method.	It does not ask for a render() method.
The react lifecycle method such as componentDIDMount, and more are used.	React hooks are considered to be the better option to the traditional React lifecycle methods.
It has multiple code, which is less readable.	It has minimal code, and is more readable.

Q16: What is a Higher Order Component?

Ans: A higher-order component (HOC) is an advanced process in React for employing component logic. However, it is not a part of the React API. In simple words, their job is to take components and return a new component. These are pure components as they can access varied child components; hence, they will not copy or amend any behaviour from their input components.

Q17: What is the meaning of the Component-based architecture of React?

Ans: A component is a small feature in React that creates a piece of the user interface. It has its own structure, methods, and APIs. However, components are also reusable, which can also be pasted into interfaces. Its individualistic nature of components, permit the developers to form a UI with several moving parts.

It is one of the common React interview questions that you should know about.

Q18:Difference between stateful and stateless components?

Ans: Here are the significant differences between stateful and stateless components:

Stateful Class Component	Stateless Functional Component
It stores information regarding the component’s state change in memory.	It measures the internal state of components.
It has complex UI Logic.	It permits properties in function and return HTML (JSX).
It keeps the data related to the past, current, potential future changes in state.	It does not contain any data regarding the past, current, potential future changes in state.
It must include the render() method returning HTML.	There is no render method used in stateless functional components.
It has the control to change the state.	It does not have the control to change the state.

Q19:Difference between controlled and uncontrolled components?

Ans: The difference between controlled and uncontrolled components are as follow:

Controlled Components	Uncontrolled Components
It does not maintain their internal state.	It maintains the internal state.
The data in controlled components is authorized by the parent component.	The data is controlled by the DOM.
They accept current value as a property.	It uses ref to get their current values.
It permits validation control.	It does not enable validation control.
It has good control over elements and data.	It has limited control over elements and data.

Q20: What is the difference between Component and Element?

Ans: The significant difference between Element and Component are as follow:

Component	Element
It is a core building block of the React application. It is the prominent function that accepts the input and returns the react element.	It is a plain JavaScript object that describes the component state and DOM node, and its needed properties.
It can hold state and props and has access to the numerous React lifecycle methods.	It keeps the information regarding the component types, its properties, and any other elements in it.
It is mutable.	It is immutable.
Methods can be applied on components.	No methods can be applied on the elements.

Q21: How does rendering work in React?

Ans: Rendering is an essential concept of React as every single component must be rendered. It is done by using the render () function. However, it offers back an element or variable that shows a DOM component once it is done. It is also permissible to render more than one HTML element at one period by including the HTML tags and passing them through the render function.

Example

import React, { Component } from 'react';
export default class App extends Component {
state = {
employeeName: [
{ id: '1', name: 'Akash' },
{ id: '22', name: 'Dev' },
{ id: '12', name: 'Tanuj' }
]
}
render() {
const Emp1 = this.state.employeeName[0].name;
const EmpId1 = this.state.employeeName[0].id;

const style = {
'textAlign': 'center',
'color': 'green'
}
// Return JSX code
return (
<div style={style}>
<h1>I am {Emp1}</h1>
<p> My Employee Id is{EmpId1} </p>
</div>
);
}
}

Q22: What is Concurrent Rendering?

Ans: The concurrent rendering assists the React apps to be more responsive by rendering component trees without blocking the main UI thread in the application. It enables React to interrupt a long-running render to handle a top-priority event.

For example, React will look after other tasks that are needed to be done when one permits concurrent mode. If something is on top priority, it will pause the current rendering and let other essential tasks finish first. It is one of the important ReactJS interview questions and answers that you should remember.

Q23: Mention 5 methods to component re-rendered.

Ans: The re-rendered updates can be caused by changes to props or State. Here are the top methods for the order to follow when a component is being re-rendered.

• render()
• componentDidUpdate()
• getSnapshotBefore()
• shouldComponentUpdate()
• Static getDerivedStateFromProps()

Q24: What are the states in React?

Ans: States are referred to as one of the crucial aspects of React. It is the source of data or objects that control features such as component behaviour and rendering. States are used to create interactive and dynamic components in React. If you are preparing for ReactJS interview questions and answers, note this one as important.

Q25: What are Props in Reacts?

Ans: Props is the short form of properties in React, which is the read-only inputs to components. In simpler language, props are the objects that store the value of attributes of a tag and work just like the HTML characteristics. It offers a way to pass the data from the parent to the child components all over the application. Other than that, props are immutable, and they cannot be changed from inside the component. However, one can add numerous attributes inside the components known as props.

Example:

HTML

<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>

JavaScript

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function App() {
return (
<div>
<Welcome name="Akash" />
<Welcome name="Dev" />
<Welcome name="Rahul" />
</div>
);
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

Also Read: Java Interview Questions

Q26: How to apply for validation on props in React?

Ans: Props validation is a tool that helps the web and application developers prevent the future. It helps in making the code more easily readable. One can apply validation on props by using App.propTypes in React Component. However, when the props are passed incorrectly, you will receive warnings on the JavaScript console.

Sno	PropsType	Description
1	PropTypes.any	The props can be of any data type.
2	PropTypes.array	The props should be an array.
3	PropTypes.bool	The props should be boolean.
4	PropTypes.func	The props should be a function.
5	PropTypes.number	The props should be a number.
6	PropTypes.object	The props should be an object.
7	PropTypes.string	The props should be a string.
8	PropTypes.symbol	The props should be a symbol.
9	PropTypes.instanceOf	The props should be an instance of a particular JavaScript class.
10	PropTypes.isRequired	The props must be provided.
11	PropTypes.element	The props must be an element.

Q27: What is prop drilling in React?

Ans: Sometimes, there is a requirement to pass data from a component located higher in the hierarchy to a component located below. However, to pass the information between such components, props are passed from a source component and keep passing the prop to the next component in the structure till it is reached where it is needed.

Q28: How do You pass Props Between the Components?

Ans: Props are known as properties, which are used in React to send data from one component to another. To pass a prop to a component, one must name the props and set it equal to some value. Passing a prop will enable to access the information in the Greeting component.

Q29: Differentiate between States and Props?

Ans: Here is the significant difference between States and Props:

State	Props
It is an updatable structure, which is used to keep information regarding the component that can be change over time.	It is a read-only component that keeps the value attributes of a tag, and has similar features just like HTML.
It is mutable.	It is immutable.
It keeps the information of the components.	It permits you to transfer data from one component to another.
It cannot be accessed by a child component.	It can be accessed by a child component.
It is entirely internal and controlled by the React Component.	It is external, controlled by whatever renders the component.

Q30: What is the use of an arrow function in React?

Ans: An arrow function is an important function in React, used to write an expression in React.

Here is an example:

import React from 'react'
import ReactDOM from 'react-dom'

class Button extends React.Component {
render() {
return (
<button
onClick={() => this.setState({ backgroundColor: 'red' })}
style={this.state}
>
Set background to red
</button>
)
}
}

ReactDOM.render(
<Button />,
document.getElementById('root')
)

In this Above Example, Arrow function is used with the onClick Event

Q31: Why should you not update the state directly?

Ans:

• If you update the state, it didn’t really changes the this.state instantly. Instead, it creates a pending state that is accessible after calling this method.
• It will also lose control of the state across all components

Example 
Updating state directly

this.state.display = 'Hello world';

If you use setState() method, it will update to a component’s state object

this.setState({display: 'Hello World' });

Q32: How pass Parameter to an event Handler?

Ans:  There are multiple ways to pass parameters to an event handler or callback

Using arrow Function

<button onClick={() => this.handleClick(id)} />

Binding

<button onClick={this.handleClick.bind(this, id)} />

Define a arrow function and passing arguments to that function

<button onClick={this.handleClick(id)}/>
handleClick = (id) => () => {
console.log("Your mobile number:" , id );
};

Q33: How to bind methods or event Handlers in JSX Callbacks?

Ans:  Three ways to do it

Arrow functions in Callbacks:

<button onClick={(e) => this.handleClick(e)}> { "Hit Me"}</button>

Binding Constructor:

class Component extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
//…
}
}

Public class fields syntax:

On the another hand if you don’t want to use binding approach, then public class fields syntax can be used.

handleClick = () => {
console.log("this is:", this);
}
<button onClick={this.handleClick}>{"hit me"}</button>

Also Read: SEO Interview Questions

Reactjs Router Interview Questions

Q1: What is a React Router?

Ans: React Router is a standard routing library system created on the top of the react. It is firmly used to create Routing in the React application using React Router Package. It helps one in defining multiple routes in the application. It offers a synchronous URL on the web browser with data shown on the web page. React Router maintains the standard structure and behavior of the application and is mainly used for creating single page web applications.

Q2: What is the importance of a Router in React?

Ans: React Router places an essential role to show different views in a single page application. It is used to explain various routes in the application. When a user types a certain URL in the browser, and if it matches any route inside the router files, the user will be deflected to that specific Route. Hence, one needs to add a Router library to the React app that permits creating multiple routes, with each leading to a different view.

Q3: Differentiate between React Router Version 5 and Version 6?

Ans:  React Router is a server-side routing library and fully-featured client for React.  It is a JavaScript library for creating user interfaces. React Router runs anywhere on the web, on the server along with node.js, and on React Native.

However,  in V6 there have been various changes in the hood, such as enhanced path pattern to match the algorithm or addition of the new components. Besides this, the bundle size has also been decreased by almost 58%.

Q4: How to pass params to history.push method in React Router

Ans: Example

this.props.history.push({
pathname: '/shows',
search: '?show_title= game-of-thrones',
state: { show-detail: response.data },
});

Q5: How to perform Automatic  Redirect in React Router?

Ans: Example

import React, { Component } from 'react';
import { Redirect } from 'react-router';
export default class LoginComponent extends Component {
render() {
if (this.state.isLoggedIn === true) {
return <Redirect to="/shows" />;
} else {
return <div>{'Login Please'}</div>;
}
}
}

Q6: How do you programmatically navigate using React Router?

Ans: There are Multiple ways to have programmatic routing or navigation within components

Use of withRouter()

import { withRouter } from ‘react-router-dom’
const Button = withRouter(({history}) => (
<button
type='button'
onClick={() => { history.push( '/shows ' ) }} >

{ 'hit me' }
</button>

))

Use <Route> Component

import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
{'Click Me!'}
</button>
)} />
)

Using context

const Button = (props, context) => (
<button
type='button'
onClick={() => {
context.history.push('/new-location')
}}
>
{'Click Me!'}
</button>
)

Button.contextTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
})
}

Q7: How to implement a default or NotFound page?

Ans: If you want to implement default or NotFound page, here is how you can do it:

A <Switch> renders the first child <Route>, which matches. A >Route> with no path always matches with each other. All you need to do is simply drop a path attribute as given below:

<Switch>
<Route exact path="/" component = {Shows}/>
<Route path="/shows-details" component={Show-details}/>
<Route component={Not Found} />
</Switch>

Q8: Mention some advantages of React Router.

Ans: Here are the top advantages of React Router:

• It is similar to the anchor tag, where links are used to direct the internal links in the application.
• It is not compulsory to set the browser history manually.
• It only needs a Single Child element.
• It encourages the Switch feature for rendering.
• In React Router, every component is explained in < Route>.
•  The packages are divided into three packages, which are Native, Web, and Core.

Q9: What is the difference between React Router and Conventional Routing?

Ans: Here are the major differences between React Router and Conventional Routing:

Conventional Routing	React Routing
Each view has a new file.	There is only a single HTML page concluded.
The HTTP request is sent to a server to attain the corresponding HTML page.	In this, only the History attribute <BrowserRouter> is modified.
The user directs across various pages for each view.	The user thinks he is directing across multiple pages but it is just a misapprehension.

Q10: Implementation of React Routing?

Ans Review the following Code to know React Routing

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}

function Home() {
return <h2>Home</h2>;
}

function About() {
return <h2>About</h2>;
}

function Users() {
return <h2>Users</h2>;
}

Also Read: Types of Interview

React Redux Interview Questions

Q11: Explain Redux.

Ans:  It is a state container in React, which is designed to help you write JavaScript applications that function consistently across client, native environment, server and are easy to test. It is highly used as a state management tool, using other JavaScript frameworks or libraries.

Q12: What are the three fundamental principles of Redux?

Ans: The three fundamental principles of Redux are as follow:

• The state is read-only in Redux, which means the only way to change the state is to instigate action.
• Single source of truth, which means the application’s state is kept in an object three within an individual store. It promotes easier amendments and inspection of the application.
• Changes are done with clear functions. One needs a pure function to differentiate how state three is changed by actions.

Q13: What is Flux?

Ans: Flux is Facebook’s application architecture for creating web applications. It is a method of handling complicated data inside a client-side application and managing how data moves in a React application. It has a single data source, and triggering specific actions is the only process to update them. These actions give a call to the dispatcher, and then the store is influenced and updated with their data as per the need. After the dispatch has been done and the store updates, it will release a change event that views can re-render suitably.

Q14: What is the difference between React and Flux?

Ans: Here are the fundamental differences:

Redux	Flux
It is an open source JavaScript library that can be used with any library or framework.	It is not any kind of framework or a library. It is a form of architecture that supports React and enables the concept of Unidirectional Data Flow.
It has a single store.	It has multiple stores.
Both store and change logic are different.	It contains State and the Change logic.
No dispatcher.	It has a singleton Dispatcher, and all actions go through that Dispatcher.
Integration with: React, react.js boilerplate, and Jumpsuit.	Integration with; React, Fluxxor, and TuxedoJS.

Q15: What are the four main components of Redux in React?

Ans: The four main components of Redux in React are:

• Action: It concludes the action that describes the call
• Reducer: It is where the state change storage unit
• Store: It is the place where state and object tree are stored
• View: It is where the store displays data

Q16:Difference Between mapStateToProps() and mapDispatchToProps()?

Ans:

mapStateToProps()

const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}

mapDispatchToProps()

const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}

Q17: Can we Access Redux Store outside components?

Ans: All you need to do is to export the store from the module. Which is formally created by using createStore()

Example:

store = createStore(myReducer)
export default store

Q18: Is there any Similarity between Redux and RxJs?

Ans: Redux and RxJS are different libraries, which have a few similarities.

Redux is a tool that is used for managing state within the application, which is generally used as an architecture for UIs. You can thinkof it as an alternative of Angular. RxJS is a reactive programming library that is used as a tool to attain asynchronous tasks in JavaScript. Consider it as an alternative to Promises. Redux utilizes the Reactive paradigm because the store is reactive. It observes the actions from the distance and substitute itself. RxJS also utilizes the Reactive paradigm but rather of being the architecture, it provides you general building blocks and observables to acquire this pattern.

Q19: Difference between React Context and React Redux?

Ans: One of the major differences between React Context and React Redux is that you can use Context in your app directly. It is going to be highly effective and functional for transferring data to deeply rooted components that what is created for.

However, in Redux, it is more robust and offers a large number of features that the React Context does provide. It uses context internally but does not reveal this in the public API.

Q20: Difference between Component & Container in React Redux?

Ans: Component is function or class component that explains the presentational part of the application.

Container is described as informal term for a component, which is associated with a Redux store. Containers subscribe to Redux state updates and execute actions. It generally do not render DOM elements, and delegate rendering to presentational child components.

Q21: What is React DevTools?

Ans: React DevTools, also known as React Developer Tools let users inspect the component hierarchy, including component props and state of the application. It subsists both Chrome and Firefox as a browser, and as a standalone application that works with other environments such as IE, Safari, and React Native.

Q22: What are the Features of Redux DevTools?

Ans: Here are some of the topp features of Redux DevTools:

• It enables you to inspect each state and action payload.
• It permits you to go back in time by canceling actions.
• You can keep on debug sessions across page reloads with persistState().
• If the reducer code is changed, every staged action will be re-evaluated.
• If the reducers get thrown, you will know during which action this happened, and what the real-time error was.

Q23: How to set initial state in Redux?

Ans: You can pass initial state as 2nd argument to createStore

const rootReducer = combineReducers({
details: details,
visibilityFilter: visibilityFilter
})
const initialState = {
details: [{ id: 123, name: 'tanuj', completed: true }]
}
const store = createStore(
rootReducer,
initialState
)

Q24: What is Action in Redux?

Ans:  Actions are stated as the plain JavaScript payloads or objects of information, which sends data from the application to the store. They are considered as the only source to keep the information for the store. However, actions must have a type property that reflects the type of action being done.

Q25: Explain the mental model of redux-saga?

Ans: Mental model of redux-saga is an independent thread in the application, which is only responsible for side effects. Redux-saga is considered a redux middleware, which means this thread can be started, paused and canceled from the centre application with basic Redux actions. Besides, it has authority to the full Redux application state, and it can dispatch Redux actions as well.

Also Read: Interview Questions for Freshers

Miscellaneous Reactjs Interview Questions

Q1: Why browsers cannot read JSX?

Ans: JSX is not considered authentic JavaScript. Hence, browsers cannot read them. It is always necessary to compile files that include JavaScript code. It is usually done via the help of the JSX compiler, which performs its task before the file enters the browser. Also, compiling the files is not possible in all cases; it also depends on multiple factors such as the nature and source of the data or file.

Q2: What can be done if the expression includes more than one line?

Ans: In such cases, inserting the multiline JSX expression is the best option. If you are using it for the first time, it might seem awkward, but it will become easier to comprehend as one goes through. Many times, it becomes compulsory to avoid the multi-lines to perform the task authentically and get expected results.

Q3: What are forms in React?

Ans: Forms enables the users to communicate with the application and gather information. It performs several tasks such as adding users, user authentication. Filtering, searching, etc. It includes text fields, radio buttons, checkboxes, and more.

Q4: Explain the use of CSS modules in React.

Ans: The CSS module file is formed with the .modules.css extension. It is only available for the component that interests it. So there are no conflicts while styling the components. In simple words, it is a file in which all the class names and animation names are reviewed locally by default. It lets one write styles in CSS files and observe them as JavaScript objects for supplementary processing and safety.

Q5: What are the two types of side effects in React components?

Ans: The two types of side effects in React component are:

• Effects With Cleanup: Many Hook effects need cleanup after DOM is updated. Suppose you want to set up an external data source subscription; it needs cleaning up the memory, or there will be a memory leak problem. It is known that React will only keep up the cleanup of memory when the dismounting of the component happens. However, the effects will run for each render() method process instead of any specific method.
• Effects Without Cleanup: This side effect is used in useEffect that does not limit the browser from screen update. It also enhances the responsiveness of an application. Some basic examples are Logging, network requests, mutations, manual DOM, etc.

Q6: What are error boundaries?

Ans: Error boundaries are introduced in version 16 of React. It provides a way to find errors that occur during the render phase. Any component that uses any of the following lifecycle methods is known as the error boundary.

• Render phase
• Inside the constructor
• Inside a lifecycle method

Q7: What are custom Hooks?

Ans: It is one of the eminent functions in JavaScript, whose name starts with ‘use’ and calls other hooks. It is a part of the v16.8 hook update that enables the reuse of stateful logic without component hierarchy structure. It is considered adequate for replacing render props and HoCs and reducing the amount of required nesting in every case. It will permit one to avoid several layers of abstraction or wrapper hell that can come along with Render Props and HoCs. It is one of the most asked React JS Interview questions that you must know.

Q8: What do you understand with the term polling?

Ans: The server needs to be altered for updates concerning time. The main goal in most cases is to check if the novel comments are there or not. This process is called polling. It looks for updates approximately every 5 seconds. It helps keep an eye on the users, which ensures that no negative information is put on the servers.

Q9: What is formik?

Ans: Formik is a group of small React Components and Hooks which helps in building forms in React Native and React. It helps in three essential parts: validation and error messages, getting values in and out of form state and handling form submission.

Q10: What is the function of the unmountComponentAtNode method?

Ans: It is a method present from react-dom packages, and it eradicates a mounted React component from the DOM and cleans its event handlers and State. If no component was ascended in the container, this function does nothing. It has a top-class API that removes a component from a particular container.

Q11: Specify the function of the displayName class property.

Ans:  The displayName string is used in debugging the messages. Generally, one doesn’t need to set it definite because it is deduced from the name of the function or class that explains the component. You might want to set it definite if you want to show a different name for debugging purposes or when one wishes to create a higher-order component. In simple words, it is used to log the name without setting any displayName property for the function.

Q12: Mention some scenarios where error boundaries do not catch errors.

Ans:  Here are the top cases where error boundaries do not work:

• During server-side rendering
• When errors are put in the error boundary code itself
• Inside Event handlers
• Use of Asynchronous code setTimeout or requestAnimationFrame callbacks

Q13: What is the difference between React and Angular?

Ans: Here are the major differences between React and Angular:

React	Angular
It has a library and only has the View layer.	It is a framework and has entire MVC functionality.
It is rendering on the server side.	It renders only on the client side but Angular 2 and above renders on the service side
It uses JSX that looks exactly like HTML in JS that can be confusing.	It follows the template approach for HTML that makes the code easily comprehensible and short.
React Native that is a react type to form mobile applications. It is comparatively faster and stable/	It is relatively less slow and stable.
In this form, the data flows only one way and therefore, debugging is easy.	Data flows both ways in this form. It has two-way data binding between parent and children, therefore debugging is frequently difficult.

Q14: Name some of the top websites using React as a front-end framework?

Ans: Here are the top websites that are using React as their front-end framework:

• Facebook
• Instagram
• Uber
• WhatsApp
• Netflix
• Airbnb
• Dropbox
• Khan Academy
• Flipboard
•  PayPal

Q15: Why use React instead of other frameworks, like Angular?

Ans: Here are the top reasons why one should use React instead of other frameworks:

Easy formation of dynamic applications

Reacts make it accessible and easier to design dynamic web applications as it requires less coding and offers more functionality. In comparison, JavaScript applications take more coding, which gets complex.

Reusable Components 

Components are the essential part of any React application, and one app contains several components. These components have their logic and purpose, which can be reused through the application, reducing the application’s development time.

Enhanced Performance 

React uses Virtual DOM, which makes the web application perform quicker. Virtual DOM compares its previous State and updates only those in real DOM, whose states have been modified, instead of updating all the components.

Q16: Differentiate between ReactJS and React Naitve?

Ans: Here are the significant differences between ReactJS and React Native.

ReactJS	React Native
ReactJs is a free software JavaScript library, which is used to create the user interface for web applications. It is in control only for the viewing layer of the application.	React Native is an open-source framework of JavaScript. It is used for building mobile applications for Windows, iOS, and Android.
It offers developers to solve complex UIs froa small and outlying code, known as components. It is formed in two different parts, first one is component, which contains the HTML codes in pieces, and second is HTML, where all the components are carried out.	It only uses JavaScript to form a cross-platform mobile application. However, it is named React but it makes use of native components instead of web components as creating blocks, which targets mobile applications instead of the browser.
It is developed by a popular software developer named Jordan Walke, who worked at Facebook.	It was developed by Facebook in 2013 for the first project Hackathon
It was initially maintained by Facebook, which is now used in products like Instagram and WhatsApp.	In march 2015, Facebook declared that React Native is free and available on GitHub.

Q17: How many outermost elements can there be in a JSX expression?

Ans: It must have at least one JSX element available to achieve the task easily. Having more than one expression is not a problem, but probably it will slow down the process. Besides this, if you are new to this technology, there are also higher chances of confusion and more than one expression.

Q18: What are the fundamental benefits of JSX transform?

Ans: JSX transform is one of the essential elements needed so the source can be converted into code the browser understands. Here are the top advantages:

• It is feasible to use JSX without importing React packages.
• The compiled output might enhance the bundle size in a sufficient amount
• Future development and growth offer the flexibility to reduce the number of concepts to learn React.

Q19: What is React Dev Tools?

Ans: React Tools is a Chrome DevTools extension for an open-source React JavaScript library. It enables one to inspect the React component structure in the Chrome Developer Tools. It is available as both a browser extension and a standalone application that works with renowned environments.

Here are the extensions that are available for various browsers:

• Standalone application (React Native, Safari, and more)
• Chrome extension
• Firefox extension

Q20: What is lifting State Up in React?

Ans: When numerous components are required to share the same changing data, lifting the shared State to their closest common components is suggested. If two child components share the same information from its parent, it is advised to move the State to the parent instead of maintaining the local State in both child components. It is one of the basic React JS interview questions asked at the expert level.

Q21: What is state mutation, and how can it be stopped?

Ans: State mutation occurs when one tries to update the State of a component without actually using the setState function. It occurs when one tries to do some computations using a state variable and unknowingly save the result in the same state variable. It is the main reason why it is advised to return to new occurrences of state variables from the reducers by using spread syntax or Object.assign({}, …).

However, it can create unknown errors in the UI as the value of the state variable got updated without telling React to go through what all components were being impacted from the update, and it can cause UI bugs.

You can prevent it by ensuring that the state variables are immutable by either imposing immutability by using setState to make updates and returning to new instances in reducers when sending upgraded state values. Remember this term as it is generally asked in React interview questions.

Q22: What is the use of the ESLint plugin for hooks?

Ans: The ESLint plugin imposes rules of Hooks to avoid bugs. It arrogates that any function starting with “use” and a capital letter just after it is a Hook. In this, Calls to Hooks are either inside the PascalCase function, which is assumed to be a component or another user function, considered a custom Hook. Besides, Hooks are called in the same sequence on every render.

Q23: What is the windowing technique?

Ans: Windowing is the process that only renders a small subset of your rows at any given time and subsequently reduces the time it takes to re-render the components and the number of DOM nodes created. If your application renders long data lists, then this strategy is highly suggested. Both react-virtualized and react-window are famous windowing libraries that provide numerous reusable components for showing grids, tabular data, and lists.

Q24: What is Shallow Renderer in React testing?

Ans: Shallow rendering helpful for conducting unit test cases in React. It helps by enabling the render of a component one level deep and declaring facts regarding its render method returns without worrying about the action of the child components that are not exemplified.

Q25: What is render hijacking in react?

Ans: The render hijacking is the process to control what a component will output using another component. It means that one can decorate the component by packaging it into a Higher-Order component. By packaging, one can insert additional props or make order changes that can cause changing logic of rendering. It does not permit hijacking, but by using HOC, one can make the component act differently.

Conclusion

These are all the freshers/intermediate/experienced level ReactJS interview questions that are often asked in job interviews. We hope these questions and their answers will help you in clearing the interview and bagging that job offer.