70+ React Js Interview Questions

CTA

Get interview ready with our top 30 React Js Interview Questions in 2025. These questions are some of the most asked questions and require an in-depth understanding of React fundamentals. Our aim is to help you get a thorough understanding of these concepts and land your dream job.

Alternatively, if you are an interviewer and looking for questions that challenge your candidate’s expertise, you have landed in the right place as well.

This article showcases a total of 30 latest React interview questions, which are divided into three sections – Basic, Intermediate, and Advanced. Also, there is a bonus waiting for you at the end of these 30 questions. Ready? Set? Go!

Table of Content

• Basic React Js Interview Questions
• Intermediate React Js Interview Questions
• Advanced React Js Interview Questions

1. What problem is React solving?

Earlier, when doing web development, in order to remove, add, or change an element on the page, the entire page had to be re-rendered. This massively impacted the application’s performance, slowing down and degrading the user experience. That is where React came into the picture. With the concept of its virtual DOM, now, whenever there is a change, only the part of the page that changes is updated with the help of Virtual DOM. This significantly reduces the page load time, enhancing the app’s performance and giving a great user experience.

2. What is React?

React is a JavaScript library developed by Meta formerly Facebook and used to build user interfaces (screens that are visible to the user). It is especially used for creating single-page applications and allows you to create reusable UI components.

3. What are Single-Page Applications?

A Single-Page Application in React is a website that loads a single HTML page (a page that contains all the necessary JavaScript and CSS for the application) and updates its content dynamically on the frontend side rather than reloading the whole page.

4. How does React differ from Angular?

React and Angular are two of the most popular front-end frameworks/libraries, but they have major differences in terms of design and usage. Let us understand it more:

5. What is Virtual DOM in React?

Imagine your web page like a tree made up of blocks. Each block here represents the part of your UI, like buttons, text, images, etc. Virtual DOM is defined as a lightweight copy of the actual DOM. It is used by React to update the changed element on the user interface without reloading the page.

6. How is the Virtual DOM different from the Real DOM?

Virtual DOM is a lightweight JavaScript object that is more like a skeletal representation of the Document Object Model(DOM), which is also known as the Real DOM. The virtual DOM, like the real DOM, comprises various nodes, which are actually the elements on the webpage. However, what makes it so light is the fact that it is just a set of nodes, and styling and JavaScript functionalities are not yet applied to it like the Real DOM. Virtual DOM updates are asynchronous and optimized while Real DOM updates are synchronous and slow.

7. How is Virtual DOM enhancing performance?

Since Virtual DOM is a lightweight JavaScript Object, calculations on it are less expensive. Whenever any changes are made on the page, the changes are first made on the Virtual DOM. After that, a patchwork of the change is done on the Real DOM, which means only the specific part is re-rendered. This saves a lot of time, as the entire page does not have to be redone again.

8. What is a Diffing Algorithm? How does it work?

Diffing algorithm is the core of React’s enhanced user experience. React has two virtual DOMs: one is the DOM after the update and the other one before the update. The diffing algorithm compares the two virtual DOMs, analyzing the differences between them at each level. It then comes up with the minimum number of changes that are required to be done on the Real DOM. This leads to a faster user experience due to the fast and efficient rendering of the webpage.

9. Is React a library or Framework?

React is a library and not a framework. It only caters to the view layer of the MVC(Model-View-Controller) architecture. It helps in constructing the user interface of the application from scratch.

10. What is the difference between a class component and a functional component?

Components in React are the building blocks of your application. You can write them in two ways:

Functional Component: The functional component is the simple JavaScript functions that return JSX (JavaScript XML, which allows developers to write HTML-like code within JavaScript Files). They are easier to read, write, and test.

Syntax:

function Welcome() {
return <h1>Hello, World !</h1>;
}

Class Component: Class components are written using by using the class syntax, introduced in ES6. They always include a render() method to return JSX.

Syntax:

import React from 'react';
class HelloWorld extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
export default HelloWorld;

11. What is the role of render() in React?

The render() method in React is responsible for telling React what to display on the screen. The render() method returns the JSX that is visible to the screen, and it is always used in a class component.

12. What features of React place it ahead in the game?

React comes loaded with features that set it apart and make it the most chosen library for developing user interfaces. Its top 5 features are: 

1. Virtual DOM 
   Virtual DOM is a twin of the Real DOM. It identifies the point of change and does a patchwork at that point on the Real DOM, improving the UI updates and making its performance skyrocket.
2. React’s Components
   React follows a component approach where all its significant code chunks can be segregated into different components instead of putting them all together in one place. This helps in making the code base more manageable and saves a lot of time for developers when any changes are to be made.
   
3. Parent-Child Relationship
   In React, data flows in a Unidirectional Pattern, i.e., from Parent to Child components via Props. This makes the codebase more understandable for existing contributors as well as new ones.
4. JSX
   Another cool feature of React is JSX, which is known as Javascript XML. This feature helps you to write Javascript and HTML within the same component file in the form of Javascript code.
5. CSR and SSR
   React works well with both Client-Side Rendering(CSR) and Server-Side Rendering(SSR).

13. What are the fragments in React?

Fragments in React allow you to group multiple elements without adding extra nodes to the DOM. You can declare it like <>…</>

14. How do the browsers read JSX?

Browsers do not understand JSX by themselves. So before its reaches to browser, JSX needs to be converted into plain JavaScript using a tool like Babel

15. Parent component vs child component in React?

A parent component is a component that has one or more child components. The parent component is responsible for passing down data to its children via props. It can also conditionally render either of the child components. While each parent can have more than one child component, each child component can only have one parent.

Here Task.js is a parent component, which imports a child component named Checkbox.

import { useState } from "react";
import Checkbox from "./Checkbox";
export default function Task({ taskName, done, onToggle, onDelete, onRename }) {
const [editMode, setEditMode] = useState(false);
return (
<div className={`task ${done ? 'done' : ''}`}>
<Checkbox initialChecked={done} onClick={() => onToggle(!done)} />
{!editMode ? (
// Content for view mode
) : (
// Content for edit mode
)}
<button className="dustbin" onClick={onDelete}>
{/* Delete Icon or Text */}
</button>
</div>
);
}

Here, Checkbox.js is a child component.

import { useState } from "react";
export default function Checkbox({ initialChecked, onClick }) {
const [checked, setChecked] = useState(initialChecked);
const handleClick = () => {
setChecked(!checked); // Update local state for visual feedback
onClick(); // Trigger the parent's toggle function
};
return (
<div className="checkbox-container" onClick={handleClick}>
{checked ? (
<div className="checkbox checked">
</div>
) : (
<div className="checkbox">
</div>
)}
</div>
);
}

16. What is the difference between State and Props in React?

In  React, State and Props both store crucial Data, and based on these two data, the changes are made to the Virtual DOM and the Real DOM. Let us understand them in more detail.

The state can be understood as the Heart of each component. Whenever there is a change in any component in react, its state gets updated. Whenever there is a change in state it will cause the child components to re-render. However, these child components cannot directly access a parent’s state. How does the data transfer happen?

There comes Props into the picture. The state data from each parent is passed to the child component in the form of props. Each child received the prop, and if there are any changes based on this new data, it is reflected and the child component is re-rendered.

17. What is the entry point of your react project?

In any react project, index.js is the most significant Javascript file in the entire application. It is the entry point of your React application. It imports all the necessary libraries like React, ReactDOM, and index.css. It also imports the App component from the App.js file that contains the application’s logic. Additionally, in this file, you can set any other configurations that might be needed in the application.

18. What is JSX? How do browsers read it?

JSX stands for JavaScript XML. It enables us to write HTML and JavaScript together in React. While learning JSX can be slightly intimidating at the beginning, once you get the hang of it, it feels like a cakewalk. It makes the React code base much simpler, elegant, and concise.

There is a catch! Browsers are not equipped to understand JSX. So, we need tools like Babel. Babel is a free, open-source JavaScript compiler and transpiler. It converts modern JS and JSX into standard JavaScript that can be understood across all browsers.

19. Why do we need to have keys in React?

Keys play a vital role when we are using list items. It serves as a unique identifier for each list element, helping React understand which item was modified and also optimizing the code.

20. What are controlled and uncontrolled components?

When you create forms in React, you can manage form inputs in two ways: using controlled components or uncontrolled components.

• In controlled components, the form data is handled by React through component state
• In uncontrolled components, the form data is handled by the DOM itself. It is not handled by the React state.

21. What are the steps to create a React application?

First, you need to install Node.js on your system. After installing Node in your system, follow these steps to create a React App:

1. Open the terminal and type the following command in the console:

npx create-react-app <Project_Name>

Note: This method is still used to create a React app, but is considered heavy for modern projects. Here is an alternative way to create a React application

npm create vite@latest

2. After creating the React app successfully, type these commands one by one in the console:

cd <Project_Folder>

npm install

3. Now, run your React app by writing npm run dev in the console.

22. What is reconciliation in React?

Reconciliation in React is the process by which React differentiates the two different trees and finds the elements that need to be changed. It is the core feature that is very helpful in optimizing application performance.

23. What are comments in React?

Comments are defined as the lines of code that are ignored by the compiler and interpreter, it is only for the developers so that they understand the code better. Comments in React can be declared in two ways:

Single-Line Comments: Use // (double forward slashes) to declare single-line comments.

Syntax:

//This is a single-line comment

Multi-Line Comments: You can write them using the asterisk format.

Syntax:

/* This is a
Multi-line Comment */

24. What are the Higher Order Components in React?

Higher Order Components, which in short called HOC, are a function that takes a component and returns a new component with enhanced behaviour. Higher-order components help to write complex code easily and stop you from copying the same logic in every component.

25. What is prop drilling in React? What are its downsides?

Prop drilling in React is the method of passing data from a parent to its child components which ensures uni-directional flow of data.

As the application grows in size, data passing via prop drilling can become more complicated. Say there is a parent component and has a child; the child also has a child, and it keeps going on. In this case, passing the data from the parent to the ‘nth’ child component will become a major hassle.

To solve this problem, it is recommended that state management solutions, like context API, Redux, etc can be used. These solutions make sure that all the data is centralized in one place. This helps eliminate the need to pass the data as a prop from one component to another.

Future-Proof Your Career with Web Development Mastery

Transform Through Our Web Development Training

Explore Program

26. What is a Rendering in React? How many times does it get called?

Rendering is the process of converting the React code into an actual DOM representation that is displayed on the browser. This is done with the help of render() method. This method has a mandatory return statement inside it, which stores the entire UI of the page in the form of JSX.

The render() method is called when the page loads for the very first time, also known as the initial render, and subsequently every time the state of the component updates.

27. What is Conditional rendering in React?

Conditional rendering is the process of rendering a specific child component from the parent if it matches certain conditions. This can be done in React with the help of if/else statements, Switch Statements, ternary operators, IIFE( Immediately Invoked Function Expression), etc.

The following image shows components being conditionally rendered with the help of ternary operators.

import { useState } from "react";
export default function Checkbox({ initialChecked, onClick }) {
const [checked, setChecked] = useState(initialChecked);
const handleClick = () => {
setChecked(!checked); // Update local state for visual feedback
onClick(); // Trigger the parent's toggle function
};
return (
<div className="checkbox-container" onClick={handleClick}>
{checked ? (
<div className="checkbox checked">x</div>
) : (
<div className="checkbox unchecked"></div>
)}
</div>
);
}

If the value of ‘checked’ is True, it will render the first component, otherwise, it will render the second component.

28. Explain the one-way binding in React?

In Simple terms, one-way data binding in React means that data flows in a single direction – from parent to child. Imagine data like water in a pipe, it goes from one source (parent component) down to the destination (child component), and React passes this data using props

29. What are Pure Components in React?

A Pure Component in React is a component that only re-renders when its props or state change. In other words, React compares the current props and state with the previous ones, and only re-renders the component if there’s a difference.

30. What are Hooks in React?

Hooks in React are special functions that facilitate developers to use state and other React features without writing a class. Before hooks, if you wanted to use state or lifecycle methods, you had to write a class component. But hooks now these days have changed everything and allow you to write code that is shorter, cleaner, and easier to manage.

31. What is useState() Hook?

The useState() Hook in React is a function in React version 16.8 that lets one add state to functional components.

Syntax:

const [taskName, setTaskName] = useState();

It declares a state variable (taskName in this case). The value of the variable task name initially is undefined. Additionally, we can also assign some initial value to the variables like this –

Syntax:

const [taskName, setTaskName] = useState("WakeUp");

The second parameter is a function(setTaskName in this case) that is called when the value of the variable needs to be updated.

32. What is the useEffect Hook in React?

useEffect hook is one of the commonly used hooks in React projects. It allows you to run side effects (anything that affects something outside the component) into your functional components.

Syntax:

useEffect(() => { 
// Function logic 
}, [dependencies]);

33. What are the Custom Hooks?

React provides various built-in hooks like useState, useEffect, useCallback, etc., but sometimes you want to reuse complex logic across multiple components. That’s the place where custom hooks come in. Custom hooks in React are JavaScript functions that start with the word “use” and allow you to reuse complex logics across multiple components.

34.What is the use of react-router?

React comes with a library known as react-router that is used to create Single Page Web Applications. It helps define various routes within an application and renders different components in each route without refreshing the page.

35. What are the different components of React Router?

Here is the list of the different components of React Router:

1. 1. BrowserRouter: 

      It is the top-level router component that uses the HTML5 History API to keep track of the URL. It allows you to move forward and backward between the pages.

   2. <Routes>:

      A container for all <Route> elements. It replaces the older <Switch> component in React Router v6.

   3. <Route>:

      This component is used to define the URL and is helpful in navigation. It checks the current URL and displays the component according to the URL.

36. Describe the lifecycle of a component.

The lifecycle of the component in React refers to the sequence of events through which the component goes through. It goes through every stage from creation to destruction. Understanding the lifecycle helps you perform specific actions, like fetching data, updating the DOM, or cleaning up resources

1. 1. Initialization: In this state, the component is created with the given props and default state.
      
   2. Mounting: In this phase, a created component is inserted into the DOM.
   3. Updating: If any component’s state or props may change, it goes under the update state and re-renders on the frontend if required.
   4. Unmounting: This is the last stage, where the component is removed from the DOM.

37. What is Axios?

Axios is a promise-based HTTP client, a widely used Javascript library that handles HTTP requests(network calls). It makes the process of sending and receiving data very effortless. It also transforms the received data to JSON automatically.

38. What is the use of React Developer Tools?

React Developer Tools is a browser extension (available for Chrome, Firefox, and Edge) that helps developers inspect, debug, and optimize React applications.

39. What is the difference between Dependencies and Dev Dependencies?

Dependencies and devDependencies are packages that are present in the React project to help you create the React application. These dependencies can be found inside the package.json file in your React project.

The table below talks about the difference between the two.

40. How you can add styling in react application?

You can add styling in several ways in React. Let us understand each one of them:

1. Using Regular CSS Files: For this, you have to create a CSS file and import it into your component by writing the following line:

   import "./style.css"

2. Using CSS Frameworks: You can also use various frameworks for doing the same, like Tailwind or Bootstrap.
3. Inline Styling: You can pass styles directly in the tags by using this Syntax:

   <h1 style={{backgroundColor: "red"}}></h1>

41. what are the different techniques to make your website faster?

Here are some of the techniques to make your website faster:

1. You can optimize your images by using standard formats like WebP or reducing the size of the image before uploading.
2. Minimize HTML, CSS, and JavaScript by removing the unwanted spaces, comments, and code.
3.  Use the Lazy Loading technique to load images or videos only when it is needed
4. Reduce HTTP requests by combining CSS and JavaScript files wherever possible.
5. Enable Browser Caching to reuse previously loaded files.

42. What is useCallback hook in React?

The useCallback hook in React is used to memoize a function. In simple words, you can say that useCallback tells React to remember a function and only recreate it when some values written in its dependency array change.

Syntax:

const memoizedCallback = useCallback(() => {
// function body
}, [dependencies]);

43. Write a program to create counter application in react.

Here is the code to create the counter application in React:

import React, { useState } from 'react'
const App = () => {
const [counter, setCounter] = useState(0)
return (
<>
<h1>Counter: ₹{counter}</h1>
<button onClick={() => setCounter(counter+1)}>Increment</button>
<button onClick={() => setCounter(counter-1)}>Decrement</button>
</>
)
}
export default App

Output:

44. What is React Redux, and what are its benefits?

React Redux is a state management library that helps in managing the global state of your React application in a centralized way, which means data is stored at a central location, and every component gets data from there.

benefits of react-redux:

• It helps in managing all shared data at one central location.
• Hooks like useSelector and useDispatch make Redux easier to use in functional components.

• Write the logic once and reuse it across the application.

46. How to handle forms in react?

Handling forms in React is a common task for handling login pages, search bars, or complex user input systems. Form handling means capturing user input from elements like <input>, <textarea>, <select>, and then sending it to the server. Here is a basic example to explain the form handling in React:

import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`Name: ${name}, Email: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="email"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;

47. What is Webpack?

Webpack is a powerful code bundler that converts all the files inside your React project, like JS files, CSS, images, assets, etc, into a single file for sending to the browser. It automatically transpiles the code with the help of Babel, takes care of internal code splitting, and enables lazy loading of components. It also takes care of the optimization process by offering features like code minification, tree shaking, etc, that help bring down the size of the application, thereby improving the load time.

48. What is event handling in react? Give an example of handling form input.

Event Handling is basically how the app responds to user interaction. React efficiently handles various input events like mouse events(onClick, onMouseEnter, etc.), keyboard events(onKeyUp,onKeyDown, etc.), Form events(onChange, onSubmit, etc.), and many more.

function App() {
  const handleChange = (event) => {
    console.log(event.target.value); // Logs the input value
  };
  return <input type="text" onChange={handleChange} />;
}

49. What is the use of e.preventDefault()?

When working with forms in React, upon form submission, the general behavior of the browser is to reload the webpage. If you are trying to track the form data, you wouldn’t be able to see anything on the console because of the page reload. To stop this, you can use e.preventDefault(). This helps in handling the form submission without reloading the page.

Code snippet for understanding usage –

function handleSubmit(e) { 
e.preventDefault(); 
console.log("Form submitted!");
}

50. Different Between React-Redux and React Context API.

React-Redux is React’s state management library. It focuses on having a centralized state, also known as a Redux store. It requires the setup of the store, reducers, actions, and middleware(if handling async calls). It is recommended for use in complex applications. React Context API is a built-in React feature that helps in state sharing without the need to pass props from parent to child via prop drilling. It is great when having a small application as it requires minimal setup and no extra libraries to be installed.

51. What is a Callback function in React?

A callback function in React is a function that is passed to another function as an argument. This function is executed once the parent function has finished executing.

function App() {
  const handleClick = () => {
    alert("Button clicked!");
  };
  return <button onClick={handleClick}>Click Me</button>;
}


Here, handleClick is a callback function passed to onClick event. This function will be called once the event happens.

Example 2 –

import { useEffect } from "react";
function App() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("Timeout triggered");
    }, 3000);
  }, []);
return <div>Check the console after 3 seconds</div>;
}

In this example, setTimeout is a callback function that executes after 3 seconds.

52. How can re-renders in React be prevented using shouldComponentUpdate()?

To enhance the performance of your web application it is vital to cut down on unnecessary re-renders. You can do it by using lifecycle method shouldComponentUpdate()

It returns a boolean value, true or false to communicate whether the component needs to update or not.

Example -

shouldComponentUpdate(nextProps) { 
return nextProps.value !== this.props.value; 
}

This will stop the component from re-rendering if the ‘value’ hasn’t changed.

Stay Ahead with Excellence in Web Development Skills

The Ultimate Web Development Program Awaits

Explore Program

53. What is a dependency array?

Dependency array is a feature that comes with hooks. It is denoted as []. It helps in optimizing the application by rendering any particular component only when the specified value changes. If an empty dependency array is passed([]), it will execute the hook only once.

Example –

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`Count is ${count}`);
  }, [count]); 
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect() will run on every render by default. But here, we have specified that it must run only when the value of ‘count’ changes. 

Alternatively, if we want the hook to run on only once, we can send an empty array like this-

 useEffect(() => {
    console.log(`Count is ${count}`);
  }, []);

54. How to Optimise a React Application?

A React application can be optimized in various ways. Some of the ways to achieve the same are-

1. Use lazy loading for code splitting using React.lazy and Suspense.
2. Using IntersectionObserverAPI
3. Minimizing HTTP requests using concepts of Throttling and Debouncing
4. Using dependency array with useeffect() hook
5. Using useMemo() and useCallback() hooks
6. By implementing Treeshaking feature of webpack to reduce the bundle size
7. Using the concepts of Code Splitting and minification.
8. Using Pure components instead of class components wherever possible
9. Efficient implementation of the life cycle method  shouldComponentUpdate(), if following the class-based.

55. Server Side Rendering vs Client Side Rendering?

In Server Side Rendering, when the user requests a website

1.  A ready-to-be-rendered HTML response is built on the server along with JavaScript functionalities and is sent to the browser.
2. The browser renders the page which is now viewable (but not interactable).
3. Browser downloads and executes JS and React.
4. The page becomes fully interactable.
   

In Client Side Rendering, when the user requests a website

1. The server sends an empty HTML file with JS links to the browser.
2. Browser downloads the HTML.
3. Browser then downloads CSS and JavaScript.

56. What can cause shouldComponentUpdate() to get into an infinite loop?

If we update the state inside shouldComponentUpdate(), it will always result in a re-render, which will, in turn, call the shouldComponentUpdate() method, and again, the state will be updated and, like this, get into an infinite loop and lead to the crashing of the web page.

57. What is this.setState function in React?

In a class component in React, this.setState() is the method to update the component state. In simple words, we can say that it is the method used to update the state and then render the component with the new state. In functional components, useState is used in place of this.setState() method

58. What are reducers in React?

Reducers in React are the functions used to manage complex state logics. It is defined as the function that takes the current state and an action, and returns a new state.

59. What are limitations of React?

As such, React is a very powerful and popular library. But here are some limitations that users found while working on React:

1. Performance is not as good while working on a very large application.
2. It is not a complete framework, only used for frontend development.
3. React apps are single-page applications (SPAs) by default, which makes them harder for search engines to find.

60. What is the Hydration in React?

Hydration in React is defined as the process where React attaches event listeners and makes a static HTML page interactive on the client side.It enables faster initial page loads and improves SEO by allowing server-rendered HTML.

61. How does React manage memory?

Here is the detailed overview of how React manages memory:

1. Virtual DOM minimizes the direct DOM manipulation. It helps in managing memory efficiently.
2. Garbage collection in JavaScript automatically removes unused data.
3. React Fibre, a smart algorithm that prevents memory blocking.
4. Memoization Tools like React.memo and useCallback reduce unnecessary re-renders.

62. What is concurrent mode in React?

Concurrent mode is an advanced feature in React that helps your app stay responsive and fast while rendering large updates. It allows React to work on multiple tasks at the same time and pause, continue, or cancel rendering based on priority.

63. What is React Fibre?

React fibre is a reimplementation of the React core algorithm. It is the algorithm which have various new features like the ability to pause, stop, or reuse work as new updates come in.

64. How do you secure a React application?

Here are some ways to secure your React application:

1. Avoid storing important and sensitive data in the frontend.
2. Always run your application over HTTPS to encrypt your data and messages.
3. Implement proper authentication and authorization of the application (Using OAuth, JWT).
4. Enable Content Security Policy (CSP)
5. By hiding internal API endpoints from the client.
6. Always update your dependencies.

65. What is CORS?

CORS stands for Cross-Origin Resource Sharing. It is the security feature implemented by browsers to prevent webpages from accessing the resources from other domains (origins). For Example, If your React app (running on http://localhost:3000) tries to request data from a server on https://api.example.com, the browser blocks the request unless the server allows it via CORS.

66. What is Strict Mode in React?

Strict Mode is a tool provided by React to help you write better and safer code during development and not affecting the app in production. You can imagine it as a helpful assistant that warns you if you’re doing something risky or outdated.

67. What is ReactDOM.createRoot in React?

ReactDOM.createRoot is a method introduced in React 18 that allows your application to use the new concurrent rendering features of React.

Before React 18,

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

After React 18,

import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

68. What is React.memo()?

React.memo() is a performance optimization tool in React. It’s a higher-order component that prevents a functional component from re-rendering if its props haven’t changed. In simple words, it remembers the last render and skips if the upcoming prop is the same as its previous state.

69. What is lazy loading in React?

Lazy Loading in React is defined as a technique that allows components or resources to load only when they are needed, rather than loading at once. React provides the React.lazy() method for implementing lazy loading in React.

70. What is suspense in React?

Suspense is a built-in React component that allows you to wait for some asynchronous operation before rendering any part of the UI. It is commonly used with React.lazy() method in React.

CTA

Bonus Question

• What problems are Hooks solving?
  

  Hooks were introduced in React version 16.8. They help get rid of hefty class components and enable functional components to access the state. Hooks also help in writing minimal code to implement the same logic. For eg. We can use the useEffect() hook and implement both componentDidUpdate and shouldComponentUpdate life cycle methods without having to declare these two different lifecycle methods.
  

• What is Mounting?
  

  Mounting is the process of converting the virtual representation of a component into a final UI representation that is visible to users.
  

• What are Pure Components in React?
  

  Pure Components in React are functional components that prevent unnecessary re-renders and optimize performance.

• What happens in the lifecycle method componentWillUnmount()?
  

  The lifecycle method componentWillUnmount() is used to take care of cleanup tasks. It is invoked just before the component is removed from the DOM. In this lifecycle method, tasks like – canceling any existing timers, cleaning network requests, etc.

• What is Next JS?
  

  Next, JS is a full-blown React framework. It is open-source and used to create powerful web applications with ease. It handles Server Side Rendering (SSR) and Static Site Generation (SSG). 

CTA

Conclusion

This brings me to the end of this power-packed article. In this article, I have tried to wrap up all the vital concepts of React, starting from basic to advanced. My questions in this article revolve mostly around the latest

version of React so that you do not have to waste time on old, obsolete concepts that are not being used anymore. This is ideal for you if you want to run through the concepts of React a couple of days before your interview.

I am more than sure that this article would be pretty wholesome for you. Should you have any more questions related to React, you can drop them into the comments section. I will be more than happy to address them. All the best!

React Js Interview Questions – FAQs