Top 50 React JS Interview Questions

React is a JavaScript library used to build quick and creative user interfaces. It is most widely used for creating UI since 2011. React is dominating among all the libraries and frameworks for building user interfaces. To expand your job opportunities as a front-end developer, you must have React on your resume. While building applications with React, we really build a bunch of independent, isolated and reusable components and then combine them to build complex user interfaces. Every React application has at least one component which we refer to as the root component. This component represents the internal application and contains other child components. So, every React application is essentially a tree of components. Here, in this blogpost we will discuss some basic, intermediate, and advance level of questions that can be asked in interview of React js.

Here is the list of some basic React JS Interview Questions:

1. What is React JS?

React is an open-source JavaScript library which is developed for building user interfaces particularly single page application. The whole concept of React is based on creating reusable component UI which is basically to create single page application.

React is a widely used JavaScript library launched in 2011. It is primarily used for frontend development.

React uses the component-based approach, which ensures to help you build components that possess high reusability.

2. What are the major features of React?

• Virtual Dom: React uses a virtual DOM to improve performance by minimizing direct DOM manipulation.
• JSX: JSX stands for JavaScript XML, which allows writing HTML in React components.
• Components: React is component-based, meaning the UI is building using reusable components.
• One-way Data Binding: Data flows in one direction, making the application easier to understand and debug.
• High Performance: React optimize updates by using a virtual DOM and efficiently re-rendering components.
• Unidirectional data flow: Data flows in a single direction, which provides better control over the entire application.

3. What is JSX?

JSX stands for JavaScript XML.

It allows us to write HTML elements in JavaScript and place them in the DOM without using method like createElement() or appendChild().

JSX is not valid JavaScript. It needs to be converted (e.g., by Babel) into React’s React.createElement() function calls, which generate the Virtual DOM objects.

4. What are the components in React?

Components are the building blocks of your React application. They are reusable pieces of UI that can be nested, managed, and handled independently. There are two types of components in React:

• Class Based components
• Functional component

5. Explain class components with example.

Firstly, we need to import React and the component from React. The class-based components start with a class keyword. Then, we have the name of the component which is always Uppercase and this will extend the component library from React. The render method renders the JSX that needs to be rendered in your browser.

6. Explain functional component with example.

Functional components are Java Script functions that are used to define and render a part of user interface. They are more concise than class-based components.

7. Can browsers read a JSX file?

No, browsers cannot read JSX files directly. It can only read the objects provided by JavaScript.

Now, to make a browser read a JSX file, it has to be transformed to a JavaScript object using JSX transformers, and only then it can be fed into the browser for further use in the pipeline.

8. What is the use of an arrow function in React?

An arrow function is used to write an expression in React. It allows users to manually bind components easily. The functionality of arrow functions can be very useful when you are working with higher-order functions particularly.

Consider the following example:

//The usual way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//Making use of the arrow function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}

9. What is a higher-order component in React?

• Higher-order components (HOCs) are a widely used technique in React for applying concepts that involve the component reusability.
• They are not a native part of the React API and allow users to easily reuse the code and bootstrap abstraction.
• HOCs are also used to allow simple sharing of behaviors across all of the components in React, adding more advances to the efficiency and functioning of the application.

10. What is the meaning of create-react-app in React?

The create-react-app in React is a simplified command-line interface (CLI) which is used to create React applications, and have no build configuration. All tools are pre-configured when using the CLI, and it will allows us to focus on the code more than on dependencies to develop the application.

The syntax used to start a simple project in React:

Create-react-app my-app

11. What is virtual DOM and how it works?

Virtual Dom is basically lightweight in-memory representation of the real DOM elements generated by React components. React keeps a copy of the actual DOM structure in memory, called the virtual DOM, and uses it to optimize updates and rendering.

• Rendering Phase: First it renders the components, creating a Virtual DOM representation.
• User Interaction/Updates: if there are any update occurs by any user click that will be your updating phase.
• Diffing Algorithm: It finds out the difference between the real Dom and the virtual Dom
• Batch Updates: It groups the updates together to minimize DOM Manipulation.
• Reconciliation Process: Applies changes to the real DOM.
• Real DOM Update: Only the necessary parts of the real DOM are updated based on the reconciled differences.

12. What is the meaning of the component-based architecture of React?

In React, components are foundations used to build user interfaces for applications. With the component-based system in place, all of the individual entities become completely reusable and independent of each other.

This means that rendering the application is easy and not dependent on the other components of the UI.

13. How does rendering work in React?

Rendering is an important aspect of React as every single component must be rendered. This is done using the render() function. The render function is part of class components, whereas function components use hooks like useState and useEffect. Once the function is called, it returns an element that represents a DOM component.

It is also possible to render more than one HTML element at a time by enclosing the HTML tags and passing it through the render function.

Intermediate Level React JS Interview Questions

14. How to use nested components?

React is a basically library of concepts of components. Whatever things you’ll be creating, every part of that will be a component. There can also be some component which can be reusable in multiple pages.

For example:

Here, we have a header component, which is common for all the pages or all the layouts you will be creating in your application. We will use a component which is a menu component and render it. This menu is now nested inside this header component. The menu component will now be considered the child of the header component.

Now, we are importing the header component in our main app component. This shows that the header component is now the sub child of the app component. So, here under app component, we have nested header component and menu component inside the header component.

15. What is state in React?

State is an entity which represents the area of application that is subject to change. each and every component in react can have their own state, which is used to generate the user interface and managed internally. When the state changes, React re-renders the component to reflect the new state.

For example:

import React, { useState } from 'react';
function Counter() {
// Declare state using useState Hook
const [count, setCount] = useState(0);
return (
<div>
<h1>Current Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
<button onClick={() => setCount(count - 1)}>Decrease Count</button>
</div>
);
}
export default Counter;

useState(0): This initializes the count state variable with a value of 0.

Here, setCount willl update the value of Count.

16. What is setState callback?

The setState method takes a callback function as the second argument and will be executed after the state has been updated and components will be re-rendered.

Syntax for setState with Callback:

this.setState(
{ key: value },
() => {
// Callback function
console.log('State updated:', this.state);}
);

17. Differentiate between Virtual DOM and Real DOM.

Virtual DOM	Real DOM
Changes can be made easily	Changes can be expensive
Minimal memory wastage	High demand for memory and more wastage
JSX element is updated if the element exists	Creates a new DOM every time an element gets updated
Cannot update HTML directly	Able to directly manipulate HTML
Faster updates	Slow updates

18. Why is React widely used today?

React provides users with an ample number of advantages when building an application. Some of them are as follows:

With React, Ul testing becomes very easy.

• React can be used in conjuction with Angular and other frameworks easily.
• The high readability index ensures easy understanding.
• React can be used for both client-side and server-side requirements.
• It boosts application performance and overall efficiency.

19. Are there any disadvantages to using React?

There are some limitations when using React as mentioned below:

Writing code is complicated as it uses JSX and inline template formatting.

• Beginners might find it tough to cope with its syntaxes and methods.
• The library contains a huge repository of information, which might be overwhelming.
• React is a simple library and not a complete framework hence calls for dependencies.

20. Fix the Component Rendering Error:

function App() {
return (
<div>
<h1>Welcome to React</h1>
<Button>Click Me</button>
</div>
);
}
export default App;

Here the <Button> tag is mismatched with its closing tag. The opening tag is <Button>, but the closing tag is <button> which is causing a syntax error. Here is the corrected code:

<button>Click Me</button>

21. What is the meaning of create-react-app in React?

The create-react-app in React is a simplified command-line interface (CLI) which is used to create React applications, and have no build configuration.

All tools are pre-configured when using the CLI, and it will allows us to focus on the code more than on dependencies to develop the application.

The syntax used to start a simple project in React:

Create-react-app my-app

22. What is the meaning of Redux?

Redux is used to store the state of the application in a single entity. This simple entity is usually a JavaScript object. Changing states can be done by pushing out actions from the application and writing corresponding objects for them that are used to modify the states.

For example:

{
first_name: 'John',
last_name: 'Kelly',
age: 25
}

All of the data is retained by Redux (also called a store).

23. What are the components of Redux in React?

Redux consists of four main components as shown below:

• Action: An object that describes the call
• Reducer: The state change storage unit
• Store: the state and object tree storage
• View: Displays data provided by the store

24. What are the disadvantages of using MVC in React?

Among a plethora of advantages of using MVC in React, there are minor problems as stated below:

• A lot of memory wastage occurs
• DOM manipulation costs a lot
• The application becomes slow
• Lots of dependencies are created
• The complexity of models increases

25. What are keys in React?

Keys are used in React to check all items and to track changes actively.

They are used to directly check if an item has been added or removed from a list.

Consider the following syntax:

function List ({ todos }) {
return (
<ul>
{todos.map(({ task, id}) => <li key={id}>{task}</li>}
</ul>
)
}

26. How can you tell React to build in the production mode?

You can actually directly code in production mode but to do it you have to set one very simple variable called environment variable and then the process.emv.NODE_ENV.

One very important thing that you do have to note is that once the React is put into production, so if there is any other developmental features and warnings, all of these are not shown in the production mode.

27. What is the use of the second argument that is passed to setState? Is it optional?

When setState is finished, a callback function is invoked, and the components get re-rendered in React. Yes, it is an optional argument. Since setState is asynchronous, it takes in another callback function.

However, in programming practice, it is always good to use another life cycle method instead of this.

28. What would you do if your React application is rendering slowly?

The cause of slow rendering in React is mostly because of the number of re-render operations, which are sometimes unnecessary.

There are two main tools provided by React to help users here:

• React.memo(): This is used to prevent all of the unnecessary re- rendering carried out by the function components.
• PureComponent: This is used to ensure that the unnecessary re- rendering of class components are avoided.

29. Can you conditionally add attributes to components in React?

Yes, there is a way in which you can add attributes to a React component when certain conditions are met. React has the ability to omit an attribute if the value passed to it is not true.

Consider the following example:

var condition = true;
var component = (
<div
value="foo"
{...(condition && { disabled: true })} />
);

30. Why is props passed to the super() function in React?

Props gets passed onto the super() function if a user wishes to access this.props in the constructor.

Consider the following example:

class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home',... }
}
}

31. What are the predefined prop types present in React?

There are five main predefined prop types in React. They are as follows:

• React.PropTypes.bool
• React.PropTypes.func
• React.PropTypes.node
• React.PropTypes.number
• React.PropTypes.string

32. Does the file name and the component name must be same in React?

No, the file name and the component name don’t have to be the same.

However, it is recommended to keep them same for easier to organize and understand your code.

33. What is spread operator in JSX?

The spread operator (…) in JSX is an easy way to spread all properties of an object as props to a React component. OR

The spread (…) operator is used to expand or spread an array or object.

34. Why to Avoid Prop Drilling? In how many ways can avoid Prop Drilling?

Prop drilling is the process of passing down props through multiple layers of components.

Why to avoid Prop Drilling?

• Maintenance: Prop drilling can make code harder to maintain as changes in data flow require updates across multiple components.
• Complexity: It increases code complexity and reduces code readability.
• Debugging: Debugging becomes challenging when props need to be traced through numerous components.

There are generally 5 Ways to avoid Prop Drilling:

• Using Context API
• Using Redux
• Using Component Composition
• Using Callback Functions
• Using Custom Hooks

35. What is Routing and Router in React?

Routing is the technique of moving between several views and components inside a React application. Instead of needing a full-page refresh, routing enables you develop a web application with navigation on a single page.
React Router: React Router is a framework that manages routing and permits navigation and component rendering according to the URL.

36. What is the role of <Routes> and <route> component in React routing?

The <Routes> component works as the root container for managing your collection of routes in React application.

The <Route> component is used to define individual routes. Here the route will be associated with some component that will going to be rendered when the route matches.

import React from "react";
import { Routes, Route, Link} from "react-router-dom";
{/* Routes */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>

For example, in this code if user enter “websitename.com/about” in URL, then “About” component will be rendered.

37. What is the role of Switch Component in React Routing?

Switch component ensures that only the first matching <Route> is rendered and rest are ignored.

For example, Switch is commonly used to handle 404 or “not found” routes.

import {Switch, Route } from 'react-router-dom';
<Switch>
<Route path="/users" element={<UsersList />} />
<Route path="/users/:id" element={<UserProfile />} />
</Switch>

Advanced React JS Interview Questions

38. Correct the State Update Logic. The button should increment the count by 2 on each click.

function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
setCount(count + 1);
};
return <button onClick={increment}>Count: {count}</button>;
}
export default Counter;

Issue: When you use setCount(count + 1) for the first time, the value of count won’t be updated right away. If setCount(count + 1) is used second time in the same function, it will still uses the old value of count because the first update hasn’t finished yet.

Corrected code:

function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount((prevCount) => prevCount + 1); // First increment using the previous state
setCount((prevCount) => prevCount + 1); // Second increment using the updated state
};
return <button onClick={increment}>Count: {count}</button>;
}
export default Counter;

Here, latest state (prevCount) will be used which results in the total increment of 2 on each click.

Predict the Output:

function App() {
const [state, setState] = useState(0);
const handleClick = () => {
setState((prev) => prev + 1);
setState((prev) => prev + 1);
};
return <button onClick={handleClick}>{state}</button>;
}
export default App;

39. What will be the value of state after one click of the button? Why?

After one click the value of state will be 1 not 2. Because React do not updates the value ofstatewhen the setState is called. It schedules the update and process it latter.  Both setState calls use the same initial value of state (which is 0), because the first state update hasn’t been applied yet when the second setState is called.”

40. Build a React component that filters a list of names based on input of user.

import React, { useState } from 'react';
function SearchFilter() {
const [query, setQuery] = useState('');      // State to store the search query
const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace'];  // List of names
// Filter names based on the query
const filteredNames = names.filter(name =>
name.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<h2>Search Names</h2>
<input
type="text"
placeholder="Search..."
value={query}
onChange={(e) => setQuery(e.target.value)}  // Update query state when user types
/>
<ul>
{filteredNames.length > 0 ? (
filteredNames.map((name, index) => (
<li key={index}>{name}</li>
))
<li>No matches found</li>
)}
</ul>
</div>
);
}
export default SearchFilter;

41. Create a Higher-Order Component.

const withTimestamp = (WrappedComponent) => {
return (props) => {
const currentTime = new Date().toLocaleTimeString();
return <WrappedComponent {...props} currentTime={currentTime} />;
};
};
// Usage
function DisplayTime({ currentTime }) {
return <div>Current Time: {currentTime}</div>;
}
const EnhancedComponent = withTimestamp(DisplayTime);

42. What are the three phases of a component life cycle in React?

The following are the three phases of a component life cycle:

• Initial rendering: This is the phase that involves the beginning of the journey of the component to the DOM.
• Update: Here, the component can be updated and rendered again if required after it gets added to the DOM.
• Unmounting: The final phase involves the destruction of the component and its eventual removal from the DOM.

43. How are event created in React?

Events can be created very easily in React as shown here:

class Display extends React.Component({
show(evt) {
// Code inside
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Here</div>
);
}
}
);

44. How is routing in React different from conventional routing?

Differences between the conventional routing and the routing in React can be shown using the following aspects:

Pages: Each view is considered as a new file in conventional routing while it is considered as a single HTML entity in React.

Navigation: In conventional routing, users have to move across web pages for viewing. In React, the views are not refreshed as objects are re-issued to create new views.

45. Differentiate between Flux and Redux in React.

Comparison	Flux	Redux
Components	Components connected to Flux in React	Container components directly connect
Dispatcher	Has a dispatcher	No dispatcher
Number of Stores	Single store	Multiple stores
State	Mutable state	Immutable state
Storage	Contains state and logic	State and logic are separate

46. Can AJAX be used with React?

Yes, any AJAX library, such as Axios and jQuery AJAX, can be used with React easily.

One important thing is to maintain the states of the components, and here too, the props are passed from the parents to the child components.

Child components still cannot send back props to parents, and this factor greatly increases rendering efficiency when dynamic data is considered.

47. Why is a router required in React?

A router is very much necessary in React as it is used to manage multiple routes whenever a user types in a URL. If the route is present in the router for that corresponding URL, then the user is taken to the particular route.

To do this, the router library needs to be added in React. It can be done using the following syntax:

<switch>
<route exact path='/' component={Home}/>
<route path='/posts/:id' component=(Newpost}/>
<route path='/posts' component={Post}/>
</switch>

48. Build a searchable list where the user can narrow down list of items based on their search input.

import React, { useState } from 'react';
function SearchableList() {
const [query, setQuery] = useState('');
const items = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango', 'Pineapple'];
const filteredItems = items.filter((item) =>
item.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<h2>Searchable List</h2>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search items"
/>
<ul>
{filteredItems.length > 0 ? (
filteredItems.map((item, index) => <li key={index}>{item}</li>)
) : (
<li>No matches found</li>
)}
</ul>
</div>
);
}
export default SearchableList;

49. What is NPM? What is the role of node_modules folder?

NPM is used to manage the dependencies for your React project, including the React library itself which are stored in the node modules folder. If you will not install the NPM, then you have to download all the React libraries yourself. In that case you might miss some libraries and which will impact your development time and your project also. Therefore, NPM will install all the libraries at once.

For Example: This Babel library is used to transpile Modern JavaScript code into a version that is compatible with older browsers and environments. Similarly, all the libraries and dependencies have some roles in developing React applications.

Node modules folder contains all the dependencies of the project including the React libraries.

50. What are React Hooks? What are the Top React Hooks?

React Hooks are inbuilt functions provided by React that allow functional components to use state and lifecycle features.

Before Hooks, class components lifecycle methods were used to maintain state in React applications.

To use React Hook first we first have to import it from React library:

// Import Hook from the React library
import React, { useState } from "react";

Here is the list of react hooks:

• useState: State
• useEffect: Side effects
• useContext: Context
• useReducer: Complex state
• useCallback: Memoization
• useMemo: Performance
• useRef: Refs
• useLayoutEffect: Synchronous Side effects.

51. What is the role of use state() hook and how It works?

The useState hook enables functional components to manage state in React.

For Example:

import React, { useState } from "react";
function UseState() {
// Array destructuring to extract state and updater function
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
console.log(`Count: ${count + 1}`); // Corrected string template syntax
};
return (
<div>
<p>Stateful Example</p>
<p>Count: {count}</p> {/* Displaying the current state */}
<button onClick={increment}>Click</button>
</div>
);
}
export default UseState;

Working of useState():

usestate() function accept the initial state value as the parameter and returns an array with two elements:

• The first element is the current state value (count in this code).
• Second element is the function that is used to update the state (setCount in this code).

The concept of assign array elements to individual variables is called array destructuring.

// state is the current state value.

// setState is a function that used to update the state.

const [state, setState] = useState(initialValue);

52. When to use useContext() hook instead of props in real application?

Use useContext instead of props when you want to avoid prop drilling and access context values directly within deeply nested components.

Advantaged of useConext():

1. Theme Switching (Dark/Light) : You can centralize and pass the theme selection of the application from the parent to all the deep child components.
2. Localization (language selection) : You can centralize and pass the language selection of the application from the parent to all the child components.
3. Centralize Configuration Settings : Common configuration settings like API endpoints can be centralized and change in the parent component will pass the setting to all its child components
4. User Preferences : Any other user preferences apart from theme and localization can also be centralized.
5. Notification System : Components that trigger or display notifications can access the notification state from the context.

53. Write a basic Redux setup with a store, an action, a reducer, and a dispatch to update the state.

import { createStore } from 'redux';
// Step 1: Define an initial state
const initialState = {
count: 0,
};
// Step 2: Create a reducer
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};

// Step 3: Create the Redux store
const store = createStore(counterReducer);

// Step 4: Define and dispatch action
store.dispatch({ type: 'INCREMENT' });console.log(store.getState()); // { count: 1 }

store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { count: 0 }

54. Create a Redux store with multiple slices (e.g., users and posts).

import { configureStore, createSlice } from '@reduxjs/toolkit';
// User Slice
const userSlice = createSlice({
  name: 'users',
  initialState: [],
  reducers: {
    addUser: (state, action) => {
      state.push(action.payload);
    },
  },
});

// Posts Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    addPost: (state, action) => {
      state.push(action.payload);
    },
  },
});
// Store
const store = configureStore({
  reducer: {
    users: userSlice.reducer,
    posts: postsSlice.reducer,
  },
});
// Export actions
export const { addUser } = userSlice.actions;
export const { addPost } = postsSlice.actions;
export default store;

55. What is the role of super keyword in constructor?

 Super keyword is used in the constructor of a class component to call the constructor of the parent class.

This is necessary to ensure that the initialization logic of the parent class is executed.

class ConstructorExample extends Component {
constructor(props) {
super(props);
// Initialize the state
this.state = {
count: 0,
};
}
render() {
return (
<h2>Count: {this.state.count}</h2>
 );
}
}
export default ConstructorExample;

56. What are the differences between controlled and controlled component?