React Interview Questions and Answers for 2026 (Freshers to Experienced)

If you are preparing for a frontend role in India, React interview questions are almost certain to decide whether you clear the technical round. React remains the most in demand UI library across product companies, service firms, and startups, and interviewers use it to test how well you understand components, state, hooks, rendering, and real world problem solving. This guide collects 40+ of the most frequently asked React interview questions and answers, arranged by topic and by experience level, with clean code examples you can practise from. Whether you are a fresher walking into your first campus round or an engineer with three years of experience aiming for a senior position, you will find questions here that match your interview.

Work through each section, write out the code by hand, and say the answers aloud. Reading is not the same as recalling under pressure. Let us begin.

React Basics and JSX

What is React and why is it used?

React is an open source JavaScript library built by Meta for building user interfaces, mainly single page applications. It lets you build reusable UI components, uses a declarative style so you describe what the UI should look like for a given state, and relies on a Virtual DOM to update the screen efficiently. It is popular because it is component based, has a huge ecosystem, and is backed by a large community.

What are the main features of React?

The core features are: a component based architecture, JSX syntax, the Virtual DOM for efficient updates, one way (unidirectional) data flow, and hooks for adding state and side effects to functional components. These together make apps predictable and easier to maintain.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML like markup inside JavaScript. Browsers cannot read JSX directly, so tools like Babel transpile it into React.createElement() calls.

const element = <h1>Hello, Goodspace</h1>;
// transpiles to:
const element = React.createElement("h1", null, "Hello, Goodspace");

Can browsers read JSX directly?

No. Browsers understand only regular JavaScript. JSX must be compiled by Babel (or a similar transpiler) into React.createElement calls before it reaches the browser.

What are the rules of JSX?

You must return a single parent element (or a Fragment), use className instead of class, close every tag including self closing ones like <img />, and wrap JavaScript expressions in curly braces {}. Attribute names use camelCase, for example onClick and tabIndex.

What is a Fragment and why use it?

A Fragment lets you group multiple children without adding an extra node to the DOM. Instead of wrapping elements in an unnecessary <div>, you use <React.Fragment> or the shorthand <> </>.

function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}

What is the difference between an element and a component?

An element is a plain object describing what you want on screen, for example <h1>Hi</h1>. A component is a function or class that returns elements. Elements are the smallest building blocks, components are reusable factories that produce them.

Components and Props

What are the types of components in React?

There are two: functional components (plain JavaScript functions that return JSX) and class components (ES6 classes extending React.Component). Modern React strongly favours functional components with hooks.

What are props?

Props (short for properties) are read only inputs passed from a parent component to a child. They let you configure and reuse components. A child must never modify its own props, this keeps data flow predictable.

function Greeting({ name }) {
  return <h2>Welcome, {name}</h2>;
}
// usage
<Greeting name="Priya" />

What is the difference between props and state?

This comparison is one of the most asked React interview questions for freshers.

Aspect	Props	State
Mutability	Immutable (read only)	Mutable via setState/setter
Ownership	Passed from parent	Owned by the component
Purpose	Configure a child	Track changing data
Triggers re-render	Yes, when parent changes	Yes, when updated
Access in child	Yes	No, private to component

What is prop drilling and how do you avoid it?

Prop drilling is passing props down through many intermediate components that do not need the data, just to reach a deeply nested child. It makes code hard to maintain. You avoid it using the Context API, or a state management library like Redux or Zustand.

What is a Higher Order Component (HOC)?

A HOC is a function that takes a component and returns a new enhanced component. It is a pattern for reusing logic, for example adding authentication checks or logging.

function withLogger(Wrapped) {
  return function (props) {
    console.log("Rendering", Wrapped.name);
    return <Wrapped {...props} />;
  };
}

What are controlled and uncontrolled components?

In a controlled component, form data is handled by React state, the input value is driven by state and updated through an onChange handler. In an uncontrolled component, the DOM itself holds the form data and you read it using a ref. Controlled components are preferred because they keep a single source of truth.

What is the difference between functional and class components?

Aspect	Functional Component	Class Component
Syntax	Plain function	ES6 class extends Component
State	useState hook	this.state
Lifecycle	useEffect hook	Lifecycle methods
this keyword	Not needed	Required
Boilerplate	Less	More
Recommendation	Preferred in modern React	Legacy code

State and Lifecycle

What is state in React?

State is a built in object that stores data that can change over a component's life. When state updates, React re-renders the component to reflect the new data. Unlike props, state is private and fully controlled by the component that owns it.

Why should you not mutate state directly?

Directly mutating state, for example state.count = 5, does not trigger a re-render and can cause bugs. You must use the setter (setCount) or setState, which tells React to schedule a re-render with the new value.

What are the phases of a component lifecycle?

There are three: Mounting (component is created and inserted into the DOM), Updating (component re-renders due to prop or state changes), and Unmounting (component is removed from the DOM). In class components these map to methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

How do lifecycle methods map to hooks?

A single useEffect can cover all three phases. Running once on mount, running on updates, and cleaning up on unmount.

useEffect(() => {
  // componentDidMount + componentDidUpdate
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // componentWillUnmount
}, []);

What are error boundaries?

Error boundaries are components that catch JavaScript errors in their child component tree, log them, and show a fallback UI instead of crashing the whole app. They are implemented as class components using componentDidCatch and getDerivedStateFromError. They do not catch errors in event handlers or async code.

Hooks

Hooks are among the most heavily tested React interview questions today, so know them cold.

What are hooks and what are the rules of hooks?

Hooks are functions that let you use state and other React features in functional components. The two rules are: only call hooks at the top level (never inside loops, conditions, or nested functions), and only call hooks from React functional components or custom hooks. These rules ensure hooks are called in the same order every render.

What does useState do?

useState adds local state to a functional component. It returns an array with the current value and a setter function.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

What is useEffect used for?

useEffect handles side effects such as data fetching, subscriptions, timers, and manually changing the DOM. Its second argument is a dependency array that controls when it runs.

• [] runs only once after the first render.
• [value] runs whenever value changes.
• No array runs after every render.

useEffect(() => {
  fetchUser(userId);
}, [userId]);

What are the types of side effects?

There are two: effects that need cleanup (subscriptions, timers, event listeners) and effects that do not (a simple API call or logging). Effects needing cleanup return a function from useEffect.

What is the difference between useMemo and useCallback?

Both memoize to avoid unnecessary work on re-renders. useMemo caches a computed value, while useCallback caches a function reference. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

const expensiveValue = useMemo(() => heavyCompute(a, b), [a, b]);
const handleClick = useCallback(() => doSomething(id), [id]);

When should you actually use useMemo and useCallback?

Use them when a computation is genuinely expensive, or when passing a stable function or value to a memoized child component to prevent it re-rendering. Overusing them adds memory overhead and can hurt performance, so do not wrap everything.

What is useRef used for?

useRef returns a mutable object whose .current property persists across renders without causing a re-render. It is used to access DOM nodes directly and to store values that should survive re-renders but should not trigger one, like a timer id or previous value.

function TextInput() {
  const inputRef = useRef(null);
  const focus = () => inputRef.current.focus();
  return (
    <>
      <input ref={inputRef} />
      <button onClick={focus}>Focus</button>
    </>
  );
}

What is the difference between useRef and useState?

Updating state triggers a re-render, updating a ref does not. Use state for values that should update the UI, use a ref for values you want to persist quietly between renders.

What is useReducer and when do you use it?

useReducer is an alternative to useState for complex state logic, especially when the next state depends on the previous one or when multiple sub values change together. It takes a reducer function and an initial state, and returns the state plus a dispatch function.

function reducer(state, action) {
  switch (action.type) {
    case "inc": return { count: state.count + 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

What is a custom hook?

A custom hook is a reusable function whose name starts with use and that can call other hooks. It extracts shared logic so multiple components can reuse it without duplication.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return width;
}

What is the difference between useEffect and useLayoutEffect?

useEffect runs asynchronously after the browser paints the screen. useLayoutEffect runs synchronously after DOM mutations but before paint, so use it when you need to measure the DOM and update it before the user sees a flicker. Overusing useLayoutEffect can block painting and hurt performance.

Once you can explain hooks confidently, the fastest way to lock in that fluency is to rehearse under real interview conditions. A tool like the Goodspace AI Mock Interview asks React questions, listens to your spoken answers, and points out where you rambled or missed the core idea.

Virtual DOM and Reconciliation

What is the Virtual DOM?

The Virtual DOM is a lightweight in memory JavaScript representation of the real DOM. When state changes, React builds a new Virtual DOM tree, compares it with the previous one, and updates only the parts of the real DOM that actually changed. This is far faster than re-rendering the whole page.

What is reconciliation?

Reconciliation is the process React uses to figure out what changed between two Virtual DOM trees and how to update the real DOM efficiently. It powers React's fast rendering.

What is the diffing algorithm?

The diffing algorithm is how React compares the old and new Virtual DOM trees. It assumes elements of different types produce different trees, and it uses keys on lists to match children across renders. This keeps the comparison at roughly O(n) instead of the O(n cubed) a naive tree diff would take.

Why are keys important in lists?

Keys give each list item a stable identity so React can tell which items changed, were added, or removed. Without proper keys, React may re-render or reorder items incorrectly. Never use the array index as a key when the list can reorder or change, use a unique id instead.

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

What is React Fiber?

React Fiber is the reconciliation engine introduced in React 16. It lets React split rendering work into small units, pause and resume work, and prioritise urgent updates, which enables features like concurrent rendering.

Event Handling and Forms

How does event handling work in React?

React uses camelCase event names like onClick and passes a function as the handler rather than a string. Under the hood React uses a synthetic event system, a cross browser wrapper around the native event, attached through a single delegated listener for performance.

<button onClick={(e) => console.log(e.target)}>Click</button>

What is a SyntheticEvent?

A SyntheticEvent is React's wrapper around the browser's native event. It gives a consistent API across browsers. It exposes the same interface as native events, including preventDefault() and stopPropagation().

How do you handle forms in React?

The common approach is controlled components, where each input's value is bound to state and updated on change. This gives you one source of truth and easy validation.

function LoginForm() {
  const [email, setEmail] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

How do you pass an argument to an event handler?

Wrap the handler in an arrow function or use bind, so the argument is passed when the event fires, not during render.

<button onClick={() => handleDelete(item.id)}>Delete</button>

Context and State Management (Redux Basics)

What is the Context API?

The Context API lets you share values like the current user, theme, or language across the component tree without passing props at every level. You create a context, wrap the tree in a Provider, and read the value with useContext.

const ThemeContext = React.createContext("light");
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Toolbar</div>;
}

When should you use Context versus Redux?

Use Context for low frequency global data like theme or auth status in small to medium apps. Use Redux (or another store) when you have complex, frequently changing global state shared across many components, and you need predictable updates, middleware, and good debugging tools.

What is Redux and what are its core principles?

Redux is a predictable state container. Its three principles are: a single source of truth (one store), state is read only (you change it only by dispatching actions), and changes are made with pure functions called reducers.

What are actions, reducers, and the store in Redux?

An action is a plain object describing what happened, with a type field. A reducer is a pure function that takes the current state and an action and returns the next state. The store holds the whole application state and provides dispatch, getState, and subscribe.

What is Redux Toolkit?

Redux Toolkit is the official, recommended way to write Redux today. It reduces boilerplate with configureStore, createSlice, and built in Immer support so you can write simpler update logic. Most new Redux projects in India now start with Redux Toolkit rather than plain Redux.

What is middleware in Redux?

Middleware sits between dispatching an action and the reducer receiving it. It is used for logging, crash reporting, and handling async logic. Common examples are Redux Thunk and Redux Saga for async API calls.

Performance Optimization

How do you optimize performance in a React app?

Key techniques include: memoizing components with React.memo, memoizing values and functions with useMemo and useCallback, code splitting with React.lazy and Suspense, using proper keys in lists, avoiding inline object and function creation in hot paths, virtualizing long lists, and lazy loading images and routes.

What is React.memo?

React.memo is a higher order component that memoizes a functional component, skipping its re-render if its props have not changed. It is useful for pure components that render often with the same props.

const Row = React.memo(function Row({ label }) {
  return <div>{label}</div>;
});

What is the difference between React.memo, useMemo, and useCallback?

React.memo memoizes an entire component based on its props. useMemo memoizes a computed value. useCallback memoizes a function reference. They solve related but different problems, know exactly which one applies where.

What is code splitting and lazy loading?

Code splitting breaks your bundle into smaller chunks loaded on demand, so users download only what they need. In React you do this with React.lazy and Suspense, often at the route level.

const Dashboard = React.lazy(() => import("./Dashboard"));
<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

How do you prevent unnecessary re-renders?

Wrap pure components in React.memo, memoize callbacks with useCallback and values with useMemo, avoid creating new objects or arrays inline in props, lift state only as high as needed, and split large components so state changes affect smaller subtrees.

What is windowing or list virtualization?

Virtualization renders only the list items currently visible in the viewport instead of all of them. For a list of thousands of rows, libraries like react-window or react-virtualized dramatically cut render time and memory.

Routing

What is React Router?

React Router is the standard library for client side routing in React. It lets you map URLs to components so your single page app can have multiple views without full page reloads.

What are the main components of React Router?

BrowserRouter wraps the app and enables routing, Routes groups route definitions, Route maps a path to a component, and Link (or NavLink) creates navigation without reloading the page.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/jobs/:id" element={<JobDetail />} />
  </Routes>
</BrowserRouter>

How do you read route parameters?

You use the useParams hook to read dynamic segments from the URL, and useNavigate to redirect programmatically, for example after a successful login.

const { id } = useParams();
const navigate = useNavigate();
navigate("/dashboard");

What is the difference between client side and server side rendering?

In client side rendering (CSR), the browser downloads a minimal HTML shell and JavaScript builds the page. In server side rendering (SSR), the server sends a fully rendered HTML page. SSR improves initial load time and SEO, CSR gives a faster app like feel after load. Frameworks like Next.js provide SSR for React.

Coding and Output Questions

What will this output and why?

function Counter() {
  const [count, setCount] = useState(0);
  const handle = () => {
    setCount(count + 1);
    setCount(count + 1);
  };
  return <button onClick={handle}>{count}</button>;
}

The count increases by only 1 per click, not 2. Both calls use the same stale count value from that render. To increment twice, use the functional updater: setCount(c => c + 1) in both calls.

Why does this useEffect run infinitely?

useEffect(() => {
  setData([...data, newItem]);
}); // no dependency array

With no dependency array the effect runs after every render, and updating state triggers another render, causing an infinite loop. Add a dependency array, for example [] or the specific value that should trigger it.

Write a component that fetches and displays data.

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("/api/users")
      .then((r) => r.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      });
  }, []);
  if (loading) return <p>Loading...</p>;
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

What is the output order of these logs?

console.log("A");
useEffect(() => console.log("B"), []);
console.log("C");

The order is A, C, then B. The component body runs first (A and C), and the effect runs after the render is committed and painted (B).

How to Prepare for a React Interview

Knowing the answers is half the battle. Here is a practical plan, especially useful for freshers facing frontend rounds at Indian product companies and service firms.

• Build two or three small projects. A todo app, a weather app using a public API, and a paginated list. Interviewers respect candidates who can point to working code on GitHub.
• Master JavaScript fundamentals first. Closures, promises, async await, array methods, and the event loop show up constantly. Weak JavaScript sinks strong React knowledge.
• Write code by hand. Many interviews use a shared editor or whiteboard. Practise useState, useEffect, and a fetch component without autocomplete.
• Understand the why, not just the what. Do not memorise that useMemo exists, understand when it actually helps and when it is wasteful. Interviewers probe reasoning.
• Prepare for the output questions. Stale closures, effect dependency arrays, and re-render behaviour are favourite trick questions.
• Rehearse out loud. You can know an answer and still fumble it when nervous. Practising spoken answers is the single most underrated step. Running a few sessions on the Goodspace AI Mock Interview gives you realistic React questions and instant feedback on both content and delivery before you face a real panel.

Consistency matters more than cramming. Two focused hours a day for two weeks beats one exhausting weekend.

Frequently Asked Questions

Are React interview questions the same for freshers and experienced candidates?

The topics overlap, but depth differs. Freshers are tested on basics like JSX, props versus state, and useState. Experienced candidates face reconciliation internals, performance optimization, architecture decisions, and state management trade offs.

How many React questions should I prepare for a fresher role?

Aim to be comfortable with around 40 to 50 core questions covering basics, hooks, the Virtual DOM, event handling, and simple coding tasks. Depth on the fundamentals matters more than breadth.

Do I need to know Redux to clear a React interview?

For freshers, understanding the Context API and the basic idea of Redux (store, actions, reducers) is usually enough. Experienced roles often expect hands on Redux or Redux Toolkit knowledge and reasons to choose it over Context.

Is class component knowledge still required in 2026?

Modern React uses functional components and hooks, and most new code is written that way. However, many companies still maintain legacy codebases, so you should understand class components and lifecycle methods well enough to read and explain them.

How important are coding and output questions?

Very important. They separate people who memorised answers from those who truly understand React. Expect at least one question on stale state, effect dependencies, or re-render behaviour in most serious interviews.

What is the best way to practise React answers out loud?

Mock interviews are the most effective method. Explaining concepts aloud exposes gaps that silent reading hides, and it trains you to stay calm and structured under interview pressure.

Final Thoughts

React interview questions reward genuine understanding, not rote memorisation. Learn the fundamentals deeply, practise writing components by hand, and pay special attention to hooks, the Virtual DOM, and the output style trick questions that interviewers love. Combine this study with regular spoken practice, and you will walk into your next frontend round with real confidence. Good luck.