ReactJS Interview Questions

Shape Image One
  1. What is ReactJS?

ReactJS, commonly referred to as React, is an open-source JavaScript library for building user interfaces. It was developed and is maintained by Facebook (now Meta) and a community of individual developers and companies. React is widely used for building web applications and provides a component-based architecture that allows developers to create reusable UI components.

2.Why ReactJS is Used?

ReactJS is used for a variety of reasons, and it has become a popular choice for web developers due to its many advantages. Here are some of the key reasons why ReactJS is used:

A. Component-Based Architecture

React encourages a modular approach to building user interfaces. Developers can create reusable components, making it easier to manage and maintain code. This component-based architecture enhances code reusability and maintainability.

B. Declarative Syntax:

React’s declarative approach to building UIs allows developers to describe what the UI should look like, and React takes care of updating the DOM to match that description. This leads to more predictable and easier-to-understand code.

C. Efficient Updating:

React uses a virtual DOM to minimize the number of actual DOM updates. This results in better performance and a smoother user experience, especially in complex and dynamic applications.

D. Open Source:

React is open source, meaning it’s free to use and can be customized or extended to meet your specific project’s needs.

E. Community and Industry Adoption:

The widespread adoption of React by numerous companies and organizations means that React developers are in high demand, making it a valuable skill in the job market.

3. What is the virtual DOM?

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

4. What are synthetic events in React?

In React, synthetic events are a wrapper around the native browser events, providing a consistent and cross-browser-compatible interface for handling events in React components. These synthetic events are created and managed by React to ensure that event handling in React is predictable and behaves consistently across different browsers.

The main reasons for using synthetic events in React are:

Cross-Browser Compatibility:

Different web browsers may have variations in how they handle events

Performance Optimization:

React’s synthetic events are optimized for performance. They are designed to be efficient and provide mechanisms to batch and manage event updates. This can help prevent unnecessary re-renders and improve the overall performance of your React application.


React recycles and reuses event objects to reduce memory consumption and enhance performance. When you access event properties asynchronously, they remain available even after the event handler has completed, which is known as event pooling.

5. Explain how lists work in React

We create lists in React as we do in regular JavaScript. Lists display data in an ordered format.

6. Why is there a need for using keys in Lists?

A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists

It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered.

7. What are forms in React?

Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc

Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc.

8. What are the components in React?

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. It splits the user interface into independent, reusable parts that can be processed separately.

9. What is the use of render() in React?

It is required for each component to have a render() function. This function returns the HTML, which is to be displayed in the component.

If you need to render more than one element, all of the elements must be inside one parent tag like <div>, <form>.

10. What is a state in React?

The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

he change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

11. What are props in React?

Props are short for Properties. It is a React built-in object that stores the value of attributes of a tag and works similarly to HTML attributes.

Props provide a way to pass data from one component to another component. Props are passed to the component in the same way as arguments are passed in a function.

12. What are the differences between state and props?


  1. Holds information about the components
  2. Is mutable
  3. Can be changed
  4. Child components cannot access
  5. Cannot have state


  1. Allows to pass data from one component to other components as an argument
  2. Are immutable
  3. Are read-only
  4. Child component can access
  5. Can have props

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

A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.

14. What are the differences between class and functional components?

Class Components

  1. Can hold or manage state
  2. Complex as compared to the stateless component
  3. Can work with all lifecycle methods
  4. Can be reused

Functional Components

  1. Cannot hold or manage state
  2. Simple and easy to understand
  3. Does not work with any lifecycle method
  4. Cannot be reused

15. Explain the lifecycle methods of components.

getInitialState(): This is executed before the creation of the component.

componentDidMount(): Is executed when the component gets rendered and placed on the DOM.

shouldComponentUpdate(): Is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions.

componentDidUpdate(): Is invoked immediately after rendering takes place.

componentWillUnmount(): Is invoked immediately before a component is destroyed and unmounted permanently.

16. What is React Router?

React Router is a routing library built on top of React, which is used to create routes in a React application. This is one of the most frequently asked react interview questions.

17. Why do we need to React Router?

It maintains consistent structure and behavior and is used to develop single-page web applications.

Enables multiple views in a single application by defining multiple routes in the React application.

18. What are the advantages of using React?

  • Use of Virtual DOM to improve efficiency: React uses virtual DOM to render the view. As the name suggests, virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created.
  • Reusable components: React uses component-based architecture for developing applications. Components are independent and reusable bits of code. These components can be shared across various applications having similar functionality. The re-use of components increases the pace of development.
  • One-Way Data Flow: React enforces a one-way data flow, making it easier to manage and understand how data is passed and modified within an application. This predictability simplifies debugging and maintenance.
  • Server-Side Rendering (SSR): React supports server-side rendering, which can improve search engine optimization (SEO) and initial page load times by rendering content on the server before sending it to the client.

19. What is JSX?

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

20. What is prop drilling in React?

Sometimes while developing React applications, there is a need to pass data from a component that is higher in the hierarchy to a component that is deeply nested. To pass data between such components, we pass props from a source component and keep passing the prop to the next component in the hierarchy till we reach the deeply nested component.

21. What is React Hooks?

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components. These are newly added features made available in React 16.8 version. Each lifecycle of a component is having 3 phases which include mount, unmount, and update. Along with that, components have properties and states. Hooks will allow using these methods by developers for improving the reuse of code with higher flexibility navigating the component tree.

22. Why were Hooks introduced in React?

React hooks were introduced in the 16.8 version of React. Previously, functional components were called stateless components. Only class components were used for state management and lifecycle methods. The need to change a functional component to a class component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

23. What is the use of useEffect React Hooks?

he useEffect React Hook is used for performing the side effects in functional components. With the help of useEffect, you will inform React that your component requires something to be done after rendering the component or after a state change. The function you have passed(can be referred to as “effect”) will be remembered by React and call afterwards the performance of DOM updates is over. Using this, we can perform various calculations such as data fetching, setting up document title, manipulating DOM directly, etc, that don’t target the output value. The useEffect hook will run by default after the first render and also after each update of the component. React will guarantee that the DOM will be updated by the time when the effect has run by it.

24. What are the different phases of the component lifecycle?

  • Initialization: During this phase, React component will prepare by setting up the default props and initial state for the upcoming tough journey.
  • Mounting: Mounting refers to putting the elements into the browser DOM. Since React uses VirtualDOM, the entire browser DOM which has been currently rendered would not be refreshed. This phase includes the lifecycle methods componentWillMount and componentDidMount.
  • Updating: In this phase, a component will be updated when there is a change in the state or props of a component. This phase will have lifecycle methods like componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate.
  • Unmounting: In this last phase of the component lifecycle, the component will be removed from the DOM or will be unmounted from the browser DOM. This phase will have the lifecycle method named componentWillUnmount.

25. What is the controlled and uncontrolled components?

  • Controlled component: In a controlled component, the value of the input element is controlled by React. We store the state of the input element inside the code, and by using event-based callbacks, any changes made to the input element will be reflected in the code as well.
  • Uncontrolled component: In an uncontrolled component, the value of the input element is handled by the DOM itself. Input elements inside uncontrolled components work just like normal HTML input form elements.

The state of the input element is handled by the DOM. Whenever the value of the input element is changed, event-based callbacks are not called. Basically, react does not perform any action when there are changes made to the input element.

Leave a Reply

Your email address will not be published. Required fields are marked *