React.js interview questions and answers for 2025

As JSX is a combination of HTML and JavaScript, browsers are unable to read it. And hence a transpiler is needed to convert JSX to Javascript so that browsers can understand.

By using reference rather than using displayName because it provides a clear and concise name for the component.

State is mutable while Props are immutable. This means that the state is internal and managed by the component while props are external and managed by anything that renders the component.

A React component is considered to be pure if it produces the same output when given the same set of state and props.

It provides a development environment for creating React applications using the JavaScript features as it creats a basic setup for the application without requiring to configure everything. It is very helpful in building a single-page application in React.

Keys are used for providing identity to list elements.

Children prop are used to pass data from the parent component to the children component.

They help catch errors in child components, log the error and show fallback UI.

To declare fragments

It highlights any potential problems in the application. It achieves this by encapsulating a section of your application as a component. While it does not show any visible element in the development mode (does not impact the performance in the production mode as well), it does give warnings.

It is the new reconciliation engine in React 16 and is used to enable incremental rendering of virtual DOM.

CreateElement creates a new element and returns it, while CloneElement clones an existing element and returns a new element.

When multiple components need to share the same data, it is advised to lift the shared state up to their parent. This means when two child components share the same data from their parent, the state is lifted up to the parent instead of the child components.

If the behavior of the component holds dependency on the state of the component, we term it as a stateful component.

We can memoize a component in React using memoization libraries.

It can be used through Webpack's DefinePlugin method to set NODE_ENV to production that takes out propType validation and extra warnings.

It is a component that renders one of many components. For this you need to use object to map prop values to components. Basically, it allows the user to turn the setting on or off.

It is not possible as we can’t update props in ReactJS as they are read-only.

It is a process by which arrays are extracted.

No, as props are immutable and top-down. This signifies that parent can transmit prop values to a child but the latter can’t modify them.

Yes, you can. While it is not used by many developers, it is required when using third-party UI components.

Allows for run time checkings for props and other similar objects.

Through React hooks, you don't have to write a class to use State and some other React features

They control the input elements which means the form’s data is managed by the component's state. It takes its value through props and makes alterations through callbacks.

They are an attribute of DOM elements. It is a function provided by React to access these elements. You might want to use them in case when you want to change the value of a child component without use of props.

We can use event actions.

React Router is available as an npm package, and can be added to your application with a single line of code. Once installed, you can define your routes in your application and use the component to link between them.

Yes, you can add JSX elements to other JSX components.

When creating a function inside the render method, it negates the performance of the pure component.

It is a technique that furnishes only a small number of rows at any given time. This reduces the time to re-render not only the elements but also the DOM nodes.

We can use useEffect that fetches the data through axios from the API.

It is a third-party library that aids in form programming and validation.

Redux Promise, Redux Saga Redux Thunk

No. A transpiler is needed to convert JSX to JavaScript. Web browsers are built to understand and read original JavaScript or JS objects. Since JSX is not a regular JS object, web browsers are unable to read it. For web browsers to read JSX, it must be made compatible by first converting it into regular JS objects. This is achieved by using a transcompiler, such as Babel. While this may seem like a simple ReactJS interview question, knowing answers to such questions can be critical.

React uses unidirectional data flow which means you can transfer data from parent to child and not the other way around.

Concurrent rendering is a feature of React that enables components to render, update, and respond to user input simultaneously.

They both are the same. Earlier concurrent mode was referred to as "Async Mode".

Yes, but it will give a warning in the console.

It is a way to build applications that cover the benefits of both the server and client side.

It is a situation where the same data is sent at every interdependent level until it reaches the final level.

DOM is the abbreviated version of the Document Object Model. The DOM shows the logical tree structure for an HTML document. There is a node at the end of each tree branch, with every tree node containing one or more objects.

In ReactJS, a lighter version of real DOM is stored in the memory. It is called the Virtual DOM. When there are any changes in specific objects, instead of updating all objects, only those specific changes are updated in the real DOM. This increases the efficiency and speed of the program. For a ReactJS interview question like this, if you have the opportunity to illustrate through a diagram, you must, as it shows the depth of your understanding.

The main reason why we use keys in lists are as follows

• It is an identifier to find which items have changed, updated, or deleted from lists
• Find out which items need to be re-rendered

React forms allow users to interact with web applications. They help users to enter the information when required. They contain buttons, text fields, checkboxes, etc.

In a React application, they are independent and reusable bits of code that can be processed separately. A single app may therefore contain multiple components.

It is a simple, scalable, and battle-tested state management solution.It is based on Reactive programming principles.

To use it, the following packages need to be installed

npm install mobx --save

npm install mobx-React --save

We can use the following steps:

• Install the ReactJS app on the machine as the ReactJS library installation requires npm. This is because npm or node package manager has several JavaScript libraries including ReactJS
• Install Sublime text or any text editor similar to it.
• Use the command prompt or terminal to install the create-ReactJS-app package
• Start the ReactJS app by going to the newly generated directory (my app) and running npm start
• Set up the component structure and define what components - functional or classes - you will use for your application
• Set up the back-end structure with Ruby-on-Rails API
• Define the App component that will contain two child components - MainContainer and Nav
• Set up the Nav component
• Set up the CreateCard component in the controlled form to then set up the MainContainer component as a class component
• Create a fetch request to the back-end using ReactJS’s component lifecycle methods
• Set up the ToDoCardContainer component to render all the ToDoCard components
• Render the cards with the ToDoCard component
• Create lists using the addList callback function
• Render lists for appropriate cards by rendering the ToDoList component
• Click on the list item to check it off once it is completed

Be sure to mention all points in detail for such a ReactJS interview question.

It enforces the Rules of Hooks. Precisely, it is a static code analysis tool for finding out faulty patterns in JavaScript code.

It lets you analyze the component hierarchy and includes component props and state. You can find React Dev Tools both as a standalone app and as a browser extension.

On opening a local HTML file in your browser, you must first open Chrome Extensions and check Allow access to file URLs.

React is better than Vue for following reasons

• Easy to test
• Suitable for mobile apps
• More flexible

It is the ability to control what one component will output from another component. Here you wrap a component with a higher order component.

You can pass numbers to React components using curly braces({}) where as strings in quotes

Using PureComponent or shouldComponentUpdate you can restrict class components from re-rendering when input properties are the same. You can do the same with the React memo function.

Below are the main benefits of React Router V4 module,

• Provides declarative routing using components
• No need to manually set history
• Reduced application size

It results in unmounting of the entire React component tree.

It is a React component property to set default values for the props argument. They are used for undefined props only and not for null props.

For example, let us take a button prop and create a color default prop

It supports all popular browsers including Internet Explorer 9 and above. However, it can support old browsers as well through polyfills.

While you can use the same keys for two different arrays, they don't need to be globally unique.

static getDerivedStateFromError()

componentDidCatch()

The unmountComponentAtNode method in React is used to unmount a React component from the DOM and clean up its event handlers and state. This method is often used when cleaning up the DOM after a React component has been removed or replaced.

When you pass no value for a prop.

For example, these two are equivalent,

You can build a search filter using following steps:

• First declare React states for input values.
• For entering the search term, create HTML input state
• Now, on Change function update state
• Add Array filter () to list of items with search term value

A simple counter can be created using following steps:

• First, create a React state that can store the count value.
• Then declare JS functions to increment or decrement the value using setState().
• Finally add HTML buttons with onClick to JSX code.

A list can be created by:

• First, declare a list of items using JS Array.
• Now to access each item use Array.map()
• Finally, return JSX code for each item

• Create an array of objects that contain an id and image URL.
• To enable pre/next functionality, we decrease or increase the index value of the currently active image.
• Finally update the active image index using the clicked option.

Install font-awesome:

Import font-awesome in your index.js file:

Add Font Awesome classes in className:

There is built-in support. You just have to pass --typescript option,

npx create-React-app my-app --typescript

No, it works only with React.createClass():

For this, we use enableReinitialize : true setting.