75 React JS Interview Questions And Answers

Getting ready for a React JS interview? It can feel overwhelming, especially if you’re not sure where to start. React’s still the go-to for front-end work, so knowing its core ideas is a must for anyone serious about building modern web apps.

I have given 75 React JS interview questions and answers to help you sharpen your skills and walk into interviews with way more confidence.

Each section digs into core ideas like React hooks, component lifecycle, state management, and performance tips. The goal? Make advanced concepts less intimidating and help you feel more at home with both the basics and the trickier stuff.

1. What is React, and why use it?

React is a JavaScript library for building user interfaces. It’s all about creating reusable components that decide how data shows up on the screen.

Meta (yep, Facebook) built it to help developers make single-page apps that feel fast and smooth. React makes UI development way less painful, thanks to its declarative style and the virtual DOM.

Instead of updating the whole page, React only changes what’s necessary. That’s a big deal for performance.

React also offers handy features like state management and hooks, which make dynamic behavior a breeze. For example:

function Welcome() {
  const [name, setName] = React.useState("User");
  return <h1>Hello, {name}!</h1>;
}

That component updates instantly when the data changes. You can see how React keeps interactive content snappy.

2. Explain the virtual DOM in React.

The Virtual DOM is React’s way of managing UI changes without hammering the real DOM every time. Instead of tweaking the actual DOM with every update, React updates an in-memory version first.

When a component’s state or props change, React builds a new Virtual DOM tree. Then it compares that to the previous one—a process called reconciliation.

This lets React figure out exactly what’s different. It updates just those parts in the real DOM, which keeps things quick.

const [count, setCount] = useState(0);

return (
  <button onClick={() => setCount(count + 1)}>
    Count: {count}
  </button>
);

Here, only the button’s text changes when you click. No unnecessary re-renders.

3. Describe the component lifecycle in React.

React components move through three main phases: mounting, updating, and unmounting. Each phase marks a different point in a component’s life—from creation to removal.

Class components use lifecycle methods to control what happens at each stage. For example, componentDidMount() runs after the component appears, and componentWillUnmount() fires right before it disappears.

Functional components use hooks like useEffect() for similar jobs. The effect hook can run after rendering and clean up when the component unmounts.

useEffect(() => {
  console.log('Mounted');
  return () => console.log('Unmounted');
}, []);

4. What are React Hooks?

React Hooks are built-in functions that let you use state and lifecycle features in functional components. They showed up in React 16.8 and made most class components kind of obsolete.

Hooks let you manage state, run side effects, and tap into context—all with less fuss. The most common ones? useState, useEffect, and useContext.

With useState, you can update state like this:

const [count, setCount] = useState(0);

You get a state variable (count) and a function to update it (setCount). Hooks keep logic reusable and components easier to read, since you skip the class syntax.

5. How does useState work in React?

The useState hook lets you manage state in functional components—no classes needed. It gives you a pair: the current value and a function to update it.

When you call useState, you create a piece of state that’s independent from others. You can store numbers, strings, arrays, objects—whatever you need. Usually, you’ll give it a default value right away.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

Clicking the button updates the state, and React re-renders the component with the new count. It just works.

6. Explain useEffect hook with an example.

The useEffect Hook handles side effects—stuff like fetching data, changing the document title, or setting up subscriptions. It runs after the component renders and can re-run when its dependencies change.

It takes a callback and an optional array of dependencies. If you pass an empty array, it runs only once after the first render (just like componentDidMount in class components).

import { useEffect, useState } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}

Here, the effect updates the document title every time count changes.

7. What is JSX?

JSX stands for JavaScript XML. It’s a syntax extension that lets you write HTML-like code right inside JavaScript. JSX makes it way easier to see what your UI will look like.

Browsers don’t understand JSX by default, so tools like Babel compile it down to regular JavaScript. For instance, this:

const element = <h1>Hello, React!</h1>;

turns into:

const element = React.createElement('h1', null, 'Hello, React!');

JSX lets you embed expressions, pass attributes, and use JavaScript logic inside your markup. That consistency makes components a lot easier to build and maintain.

8. Difference between functional and class components

Functional components use regular JavaScript functions. They take props as input and spit out JSX for the UI.

With Hooks, functional components can now handle state, effects, and more—stuff that used to require class components.

Class components rely on ES6 classes that extend React.Component. They use this.state for state and methods like componentDidMount for lifecycle events.

Functional components are generally easier to write, test, and read. They also tend to be a bit lighter on memory. Class components still matter for older codebases, though.

// Functional Component
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// Class Component
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}