React JS Interview Questions (With Answers & Examples)

Whether you’re preparing for your first frontend interview or brushing up before your next React developer role, this guide covers the most commonly asked React JS interview questions : from basics to advanced concepts.

What is React JS?

React JS is an open-source JavaScript library developed by Facebook for building fast, interactive user interfaces. It focuses on the view layer (V) of the MVC architecture.

Example:

function HelloWorld() {
  return <h1>Hello, React!</h1>;
}

function HelloWorld() {
  return <h1>Hello, React!</h1>;
}

What are Components in React?

Components are the building blocks of a React application. Each component is an independent, reusable piece of UI. React has two types of components: Functional and Class-based.

Example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML inside JavaScript.

Example:

const element = <h2>Welcome to DebugBoat!</h2>;

const element = <h2>Welcome to DebugBoat!</h2>;

What is the Virtual DOM?

The Virtual DOM is an in-memory representation of the real DOM. When the state changes, React updates the Virtual DOM first, compares it with the previous version (diffing), and then efficiently updates only the changed elements.

What are Props in React?

Props (short for properties) are read-only attributes used to pass data from a parent component to a child component.

Example:

function User(props) {
  return <h2>Hello, {props.name}</h2>;
}
<User name='Supriyo' />

function User(props) {
  return <h2>Hello, {props.name}</h2>;
}
<User name='Supriyo' />

What is State in React?

State represents mutable data that affects the rendering of a component.

Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (<><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></>);
}

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (<><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></>);
}

What are React Hooks?

Hooks let you use state and lifecycle methods in functional components.

Example:

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

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

What is the Difference Between State and Props?

State is mutable and managed within a component, while Props are immutable and passed from parent to child.

What is React Router?

React Router is a standard library for routing in React apps.

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path='/' element={<Home/>}/><Route path='/about' element={<About/>}/>
  </Routes>
</BrowserRouter>

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path='/' element={<Home/>}/><Route path='/about' element={<About/>}/>
  </Routes>
</BrowserRouter>

How Does React Handle Forms?

React uses controlled components where form data is handled by React state.

Example:

function Form() {
  const [name, setName] = useState('');
  return (<form><input value={name} onChange={(e)=>setName(e.target.value)} /></form>);
}

function Form() {
  const [name, setName] = useState('');
  return (<form><input value={name} onChange={(e)=>setName(e.target.value)} /></form>);
}

What are Keys in React Lists?

Keys help React identify which items have changed, are added, or removed.

Example:

{users.map(user => <li key={user.id}>{user.name}</li>)}

{users.map(user => <li key={user.id}>{user.name}</li>)}

What is Lifting State Up?

When multiple components need to share the same data, you lift the state up to their nearest common parent and pass it down via props.

What are Pure Components?

Pure components re-render only when their props or state change. They help in optimizing performance.

What are Higher-Order Components (HOC)?

A Higher-Order Component is a function that takes a component and returns a new component with additional functionality.

Example:

const withLogger = (WrappedComponent) => (props) => { console.log('Props:', props); return <WrappedComponent {...props} />; };

const withLogger = (WrappedComponent) => (props) => { console.log('Props:', props); return <WrappedComponent {...props} />; };

What is Redux and How Does It Work with React?

Redux is a predictable state management library for JavaScript apps. It uses a store to hold state, actions to describe changes, and reducers to update the state.

Conclusion

React is one of the most in-demand frontend libraries, and these questions cover everything from fundamentals to advanced concepts. Whether you’re a student learning React or a developer preparing for an interview, understanding these topics will help you explain how and why React works.