React Interview Questions and Answers

React interview questions and answers in 2026 still split across JavaScript screening, React fundamentals round one, hooks and architecture round two, and a live machine round where you type small components on the spot. This is the 110-question deep guide written so each answer opens with a direct response you can speak in under a minute - pair it with JavaScript interview questions and answers for the screening layer.

Last updated: September 9, 2026 - Reviewed by Asmorix React mentors in Chennai

Asmorix mentors compiled these from product startups, GCC front-end panels, and services React-plus-Node drives across OMR and Guindy. For DSA and algorithm rounds, use dedicated hubs - not mixed here: DSA interview questions, coding interview questions, programming problems and solutions, and company-wise coding questions. Aptitude screens: aptitude questions, logical reasoning, quantitative aptitude. Also see Python interview questions, React course syllabus, full stack developer course in Chennai, and the Asmorix blog.

How React Interviews Are Structured in India (2026)

Most React fresher and 0-2 year loops in Chennai follow four rounds. Know the filter before you memorize 110 answers:

Key takeaway: interviewers reward a crisp first sentence, then a short example - exactly how every answer below is structured for answer-engine and spoken delivery.

React Core Interview Questions and Answers (Q1-Q20)

1. What is React?

React is a JavaScript library for building user interfaces from reusable components that update efficiently when data changes. Meta maintains it; you compose function components with JSX, manage state with hooks, and let React reconcile the Virtual DOM against the real DOM. In Chennai product panels, tie React to a SPA you shipped - not just textbook definitions.

2. What is the Virtual DOM?

The Virtual DOM is a lightweight in-memory tree React builds from your JSX so it can diff the previous and next versions before touching the browser DOM. React batches minimal real DOM updates after reconciliation, which keeps most UIs fast without manual DOM APIs. Follow-up: Virtual DOM is not always faster than hand-tuned vanilla DOM - it trades developer speed for predictable updates.

3. What is JSX?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript, which Babel or Vite compiles to React.createElement calls. It is not HTML - attributes like className and self-closing tags follow JavaScript rules. Interviewers expect you to say JSX must live in a scope where React is imported.

import React from "react";

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>
}

export default function App() {
  return <Greeting name="Chennai" />;
}

4. What is the difference between function and class components?

Function components are plain functions returning JSX and use hooks for state and side effects; class components use extends React.Component with this.state and lifecycle methods. Modern codebases prefer functions because hooks compose logic cleanly and classes are legacy in new projects. Mention you can still read classes in older enterprise repos.

5. What is the difference between props and state?

Props are read-only inputs passed from parent to child; state is mutable data owned inside a component that triggers re-renders when updated via setters. Props flow down, events flow up - mixing them up is a common fresher trap. Say: props configure a component; state tracks what changes over time.

import { useState } from "react";

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

6. Why do lists need a key prop?

Keys give React a stable identity for each sibling in a list so reconciliation can match, reorder, or remove items without corrupting component state. Use stable IDs from data, not array index when items can be inserted, deleted, or reordered. Missing keys trigger console warnings and subtle UI bugs in interviews.

7. What are React Fragments?

Fragments let you group multiple JSX nodes without adding an extra DOM wrapper like a div. Syntax: <Fragment> or shorthand <>...</> when you do not need keys on the fragment root. Tables and flex layouts often need fragments to avoid invalid HTML nesting.

8. What are controlled vs uncontrolled components?

A controlled component binds input value to React state and updates via onChange; an uncontrolled component stores value in the DOM and you read it with refs. Controlled inputs are the default in modern forms because React owns the single source of truth. Uncontrolled fits quick file inputs or integrating legacy widgets.

import { useState } from "react";

export default function ControlledInput() {
  const [text, setText] = useState("");
  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

9. What is lifting state up?

Lifting state up means moving shared state to the closest common ancestor so sibling components read one source of truth and pass callbacks down. It replaces duplicated local state that would drift out of sync. Classic example: two inputs showing the same temperature converted between Celsius and Fahrenheit.

import { useState } from "react";

function Display({ value }) {
  return <p>Value: {value}</p>
}

export default function Parent() {
  const [value, setValue] = useState("");
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <Display value={value} />
    </>
  );
}

10. What is component composition?

Composition builds UIs by nesting components and passing JSX via props instead of inheritance - React favors has-a over is-a. You reuse behavior through hooks and reuse structure through children slots and render props. Interviewers prefer composition examples over deep component hierarchies copied from OOP slides.

11. What is the children prop?

The children prop is the JSX nested between opening and closing component tags, available as props.children inside the parent. It enables layout shells like <Card>...content...</Card> without hard-coding inner markup. Can be a node, array, or render function depending on your API design.

12. What is reconciliation?

Reconciliation is React algorithm that compares the new Virtual DOM tree with the previous one to decide which DOM nodes to create, update, or remove. It assumes elements of different types produce different trees and preserves state when types and keys match. Fiber lets React pause and resume this work for concurrent features.

13. What are synthetic events in React?

Synthetic events are React cross-browser wrapper around native DOM events with the same interface as browser events but without legacy pooling in modern React. React attaches delegated listeners at the root for performance and normalizes quirks across browsers. Call event.preventDefault() the same way as native events in forms.

14. What is one-way data flow in React?

Data flows down through props and events flow up through callbacks - parents own state, children request changes via functions. This predictability makes debugging easier than two-way binding in some older frameworks. Redux and Context still follow one-way flow; they just centralize where state lives.

15. What is a React element?

A React element is a plain JavaScript object describing a UI node - type, props, and children - created by JSX or createElement. Elements are immutable snapshots; components are functions or classes that may return elements. Cheap to create, expensive only when reconciliation hits the real DOM.

16. What is createRoot vs ReactDOM.render?

createRoot (React 18+) enables concurrent features and is the modern entry point; legacy ReactDOM.render is deprecated for new apps. Both mount your root component into a DOM container, but only createRoot participates in automatic batching and transitions. Chennai panels expect createRoot in 2026 greenfield answers.

17. How do you conditionally render in React?

Use JavaScript expressions inside JSX: ternary {isLoggedIn ? <Dashboard /> : <Login />}, logical AND {error && <p>{error}</p>}, or early return before main JSX. Keep conditions readable - nested ternaries in JSX are a code-review red flag. Extract helper components when branches grow large.

18. How do you render lists in React?

Map data to elements: {items.map(item => <li key={item.id}>{item.name}</li>)} inside a parent wrapper. Never forget keys on siblings; filter or sort before map when the list is derived. Empty lists deserve explicit empty-state JSX, not a blank screen.

const users = [{ id: 1, name: "Anita" }, { id: 2, name: "Ravi" }];

export default function UserList() {
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

19. What is prop drilling?

Prop drilling is passing props through many intermediate layers that do not use them, just to reach a deep child. It is acceptable for shallow trees but painful in large apps - Context, composition, or state libraries reduce it. Interviewers want you to name prop drilling before jumping to Redux for every problem.

20. What does React StrictMode do?

StrictMode is a development-only wrapper that double-invokes renders and effects to surface side effects and unsafe lifecycles, plus warns about legacy APIs. It does not render twice in production builds. Expect console noise in dev when effects lack cleanup - that is intentional stress-testing.

React Hooks Interview Questions and Answers (Q21-Q45)

21. What is useState?

useState returns a state value and a setter function so function components can hold data that persists across re-renders. Call it at the top level: const [count, setCount] = useState(0). Updates schedule a re-render; use functional updates when the new state depends on the previous value.

import { useState } from "react";

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

22. How does useEffect work?

useEffect runs side effects after React paints the DOM - fetching data, subscriptions, or manual DOM tweaks. Pass a function and optional dependency array; React compares deps to decide re-run. Without deps it runs every render; with [] it runs once after mount.

import { useEffect, useState } from "react";

export default function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>{seconds}s</p>
}

23. What is the useEffect dependency array?

The dependency array lists values from the component scope that the effect reads - when any dep changes by reference or value, React re-runs the effect. Omitting the array runs after every render; an empty array runs only on mount. Stale bugs come from missing deps that ESLint exhaustive-deps catches.

24. What is useEffect cleanup?

Cleanup is a function returned from useEffect that React runs before the effect re-runs and on unmount - ideal for clearing timers, aborting fetches, or removing listeners. Pattern: return () => clearInterval(id). Skipping cleanup when you subscribe is a top machine-round follow-up trap.

useEffect(() => {
  const controller = new AbortController();
  fetch("/api/data", { signal: controller.signal })
    .then((r) => r.json())
    .then(setData);
  return () => controller.abort();
}, []);

25. What is useMemo?

useMemo memoizes a computed value between renders when dependencies unchanged: const sorted = useMemo(() => sort(items), [items]). It avoids expensive recalculation, not every render cost. Do not wrap cheap expressions - profile first; interviewers punish blanket useMemo everywhere.

26. What is useCallback?

useCallback memoizes a function reference: const onClick = useCallback(() => doThing(id), [id]). Useful when passing callbacks to memoized children that compare props by reference. It does not make the function faster - it stabilizes identity to prevent child re-renders.

27. What is useRef?

useRef returns a mutable { current: value } object that persists across renders without triggering re-renders when updated. Use it for DOM nodes via ref={myRef} or storing previous values and interval IDs. Changing ref.current does not schedule an update unlike setState.

28. What is useContext?

useContext reads the nearest value from a Context Provider above in the tree without prop drilling. Create context with createContext, wrap subtree with Provider value={...}, consume with useContext(MyContext). All consumers re-render when the provided value changes - split contexts to limit blast radius.

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

29. What are custom hooks?

Custom hooks are functions starting with use that call other hooks to share stateful logic between components. They do not share state instances - each call gets its own state. Example: useWindowWidth() or useFetch(url) extracted from duplicated useEffect blocks.

import { useState } from "react";

export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const inc = () => setCount((c) => c + 1);
  const dec = () => setCount((c) => c - 1);
  return { count, inc, dec };
}

30. What are the Rules of Hooks?

Only call hooks at the top level of React functions - not inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules let React preserve hook call order between renders. Breaking them causes "Rendered more hooks than previous render" crashes.

31. What is stale closure in hooks?

Stale closure happens when a callback or effect captures old state or props because dependencies were missing or a ref was not used. Classic bug: setInterval logging stale count because the effect closed over mount-time value. Fix with functional updates, correct deps, or refs for latest values.

32. Why does StrictMode double invoke effects?

StrictMode intentionally mounts, unmounts, and remounts components in development to expose effects that miss cleanup or assume single mount. Production does not double invoke. If your fetch runs twice in dev only, add abort logic - interviewers treat that as correct React 18 behavior.

33. When do you use useReducer vs useState?

useReducer manages complex state transitions with a reducer function (state, action) => newState - better for multi-field forms or state machines. useState fits simple independent values. Dispatch identity is stable; colocate reducer with component or extract for testability.

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "inc": return { count: state.count + 1 };
    case "dec": return { count: state.count - 1 };
    default: return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <button onClick={() => dispatch({ type: "inc" })}>
      {state.count}
    </button>
  );
}

34. What is useId?

useId generates stable unique IDs across server and client for accessibility attributes like htmlFor and aria-labelledby. IDs differ between server render and client hydration if you use Math.random() - useId avoids mismatch. Prefix with component-specific strings when wiring multiple labels.

35. What is useTransition?

useTransition marks state updates as non-urgent transitions, returning [isPending, startTransition] so the UI stays responsive during heavy re-renders. Use for tab switches or large list filtering where input must stay snappy. Related: useDeferredValue defers updating a derived value instead of the setter path.

36. What is the difference between useLayoutEffect and useEffect?

useLayoutEffect fires synchronously after DOM mutations but before the browser paints - use for measuring layout or preventing flicker. useEffect runs after paint and is the default for most side effects. SSR warning: useLayoutEffect does nothing on server; prefer useEffect unless you need layout sync.

37. Can you call hooks conditionally?

No - hooks must run in the same order every render, so conditions, loops, and early returns before hooks break React. Move conditions inside the hook body or split into child components instead. This rule is non-negotiable in every Chennai React panel.

38. How do custom hooks share logic without sharing state?

Each component calling useCounter() gets its own isolated useState inside the hook - shared logic, separate state bags. To share state globally, combine custom hooks with Context or an external store. Interviewers contrast this with class mixins of the past.

39. What is the difference between omitted deps and an empty dependency array?

Omitting the second argument makes useEffect run after every render including the first. Passing [] runs only once after initial mount (plus StrictMode remount in dev). Passing [a, b] runs when a or b change. Never confuse omitted with empty - behavior differs drastically.

40. What is the difference between useMemo and useCallback?

useMemo caches a computed result value; useCallback caches a function reference. Technically useCallback is useMemo for functions: useCallback(fn, deps) equals useMemo(() => fn, deps). Pick useMemo for expensive derived data and useCallback for stable handlers passed to memo children.

41. How is useRef used for DOM access vs mutable values?

Pass ref to JSX ref={inputRef} and read inputRef.current after mount for focus or measurements. The same ref object can store any mutable value that should survive renders without causing them - timers, previous props, or cache maps. Do not write to ref during render for UI that should display the value.

42. How do you reduce Context re-renders?

Split contexts by concern so consumers subscribe only to the slice they need; memoize provider value objects with useMemo; or pass state and dispatch through separate contexts. Putting a new object literal in value={{ user, theme }} every render re-renders all consumers - stabilize with useMemo.

43. How would you sketch a useFetch custom hook?

Encapsulate loading, data, and error state plus a useEffect that fetches when URL changes, with AbortController cleanup on unmount or URL change. Return { data, loading, error } so components stay declarative. This pattern appears in both interviews and production codebases.

44. What happens if you mutate state directly?

Direct mutation like state.items.push(x) without setState or setItems skips React change detection - UI will not update. Always create new references: spread arrays and objects when updating. Interviewers ask this right after useState to catch candidates copying OOP habits.

45. What is useImperativeHandle with forwardRef?

forwardRef lets a parent pass ref to a child; useImperativeHandle customizes the ref value exposed to parent instead of the raw DOM node. Use sparingly for focus or scroll APIs; default React style keeps logic in props and state, not imperative handles.

React State, Routing, and Architecture Questions (Q46-Q65)

46. When do you choose Context vs Redux?

Context fits low-frequency global values like theme, locale, or auth user passed to many components. Redux (often Redux Toolkit) fits complex shared state with time-travel debugging, middleware, and many writers across large teams. Say: start with local state and Context; add Redux when updates become hard to trace.

47. What is Redux Toolkit and why use it?

Redux Toolkit is the official concise way to write Redux with createSlice, Immer-powered reducers, and configureStore defaults including Redux DevTools. It removes boilerplate from classic switch reducers and action constants. Light interview answer: RTK plus React-Redux hooks is the 2026 standard Redux stack.

48. What is React Router?

React Router is the de facto routing library for React SPAs, mapping URLs to components with BrowserRouter, Routes, and Route. Version 6 uses element props and relative routes. It enables nested layouts, loaders in data routers, and navigation without full page reloads.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

49. What is BrowserRouter vs HashRouter?

BrowserRouter uses the HTML5 history API with clean URLs like /dashboard - requires server fallback to index.html. HashRouter uses #/ fragments and works on static hosts without rewrite rules. Product apps prefer BrowserRouter; internal tools on plain S3 sometimes use HashRouter.

50. What is the difference between useNavigate and Link?

Link renders an anchor that navigates declaratively with accessible href and client-side routing. useNavigate returns a function for programmatic navigation after form submit or timeout. Use Link for menus; useNavigate for imperative redirects.

51. How do you read route params with useParams?

Define a dynamic segment like path="/users/:id" and call const { id } = useParams() inside the matched component. Params are strings - coerce to numbers when needed. Nested routes can expose multiple param keys simultaneously.

52. How do you implement protected routes?

Wrap routes checking auth state: if not logged in, render Navigate to login or null; else render children. Pattern with React Router v6: create a ProtectedRoute component using useLocation to preserve return URL. Keep auth token validation on the server - client checks are UX only.

53. What is React.lazy?

React.lazy dynamically imports a component with const Page = lazy(() => import('./Page')) so webpack or Vite splits it into a separate chunk loaded on demand. Must pair with Suspense boundary showing fallback while loading. Reduces initial bundle for dashboard shells with many routes.

import { lazy, Suspense } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

export default function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Dashboard />
    </Suspense>
  );
}

54. What is Suspense?

Suspense lets you declare loading UI while lazy components or data sources suspend: <Suspense fallback={<Spinner />}>...</Suspense>. React 18 expanded concurrent Suspense for data fetching patterns in frameworks like Next.js. Fallback should be lightweight and accessible.

55. What is an Error Boundary?

Error Boundaries are class components implementing getDerivedStateFromError or componentDidCatch to catch render errors in children and show fallback UI instead of white screen. Hooks cannot be error boundaries yet - use react-error-boundary library or a class wrapper. They do not catch event handler or async errors.

import { Component } from "react";

export class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) return <h2>Something went wrong.</h2>;
    return this.props.children;
  }
}

56. How does local state differ from global state?

Local state lives in one component subtree and should stay there when no sibling needs it. Global state is shared across distant branches - Context, Redux, Zustand, or URL state. Over-globalizing causes unnecessary re-renders; under-globalizing causes prop drilling.

57. When is lifting state up enough vs needing Context?

Lift state when only a small subtree shares it - parent holds state, children receive props. Add Context when many distant leaves need the same value and drilling hurts maintainability. If updates are frequent and granular, consider colocated state libraries instead of one giant context.

58. How do you handle forms in React?

Controlled forms wire each input to state with value and onChange, submit via onSubmit with preventDefault. For large forms, useForm libraries like React Hook Form reduce re-renders. Validation can be inline, schema-based with Zod, or server-returned field errors.

59. Show a controlled form submit pattern.

Keep fields in state, validate on submit, call API, reset or show errors based on response. preventDefault stops full page reload on form tag. Interviewers want to hear single source of truth for every input value.

import { useState } from "react";

export default 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>
  );
}

60. How do you handle multiple inputs in one form?

Use one state object and a generic change handler reading name and value from event.target, or useReducer for clearer action types. Pattern: setForm(f => ({ ...f, [name]: value })). Avoid separate useState per field when fields grow past three.

61. What is state batching in React 18?

React 18 batches multiple setState calls in the same event or effect into one re-render for performance - including promises and timeouts in many cases. Before 18, only React event handlers batched automatically. Mention automatic batching when asked why two setStates show one DOM update.

62. Why use useReducer for complex forms?

Forms with interdependent fields, multi-step wizards, or undo benefit from explicit actions instead of many setState calls. Reducer keeps transition logic in one function easy to unit test. Pair with Context when the form spans steps across routes.

63. When should state live in the URL vs component state?

URL state suits shareable filters, pagination, and tabs users bookmark - use searchParams. Ephemeral UI like modal open or hover stays in component state. React Router search params sync browser back button with list filters - a common product interview scenario.

64. How do nested routes work in React Router v6?

Parent Route elements render an Outlet where child routes appear, enabling shared layout chrome like sidebar plus changing main panel. Paths can be relative to parent. Define routes as nested JSX or createBrowserRouter route objects with children arrays.

65. What is Outlet in React Router?

Outlet is a placeholder component rendering the matched child route inside a parent layout route. Layout routes wrap authentication shells, dashboards, and settings sections without duplicating nav markup per page.

React Performance, Testing, and Rendering Questions (Q66-Q80)

66. What is React.memo?

React.memo is a higher-order component that skips re-render when props are shallowly equal to previous props. Wrap expensive pure presentational components receiving stable props. It does not help if props are new object references every parent render - pair with useMemo or useCallback.

import { memo } from "react";

const Row = memo(function Row({ label }) {
  return <li>{label}</li>
});

export default function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <Row key={item.id} label={item.name} />
      ))}
    </ul>
  );
}

67. When does React.memo not help?

When parent passes inline objects or arrow functions recreated each render, memo sees changed props and re-renders anyway. Also useless for components that always receive changing props or are cheap to render. Profile before memoizing everything - complexity has a cost.

68. What is code splitting in React?

Code splitting breaks the bundle into chunks loaded on demand via dynamic import and React.lazy, shrinking initial parse time. Route-based splitting is the most common win in SPAs. Vite and webpack handle chunk generation; Suspense shows fallback while chunks load.

69. What is the React Profiler?

The Profiler API and React DevTools Profiler tab measure component render times and why commits happened. Wrap subtrees in <Profiler id="List" onRender={callback}> to log durations in development. Use it to find slow lists or runaway re-renders before guessing optimizations.

70. What is React Testing Library?

React Testing Library renders components like users interact with them - querying by role, label, or text instead of implementation details. Pair with Jest or Vitest. Philosophy: test behavior, not internal state or class names. Chennai product teams expect at least one RTL example in mid-level loops.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";

test("increments count", async () => {
  render(<Counter />);
  await userEvent.click(screen.getByRole("button", { name: /count/i }));
  expect(screen.getByText("1")).toBeInTheDocument();
});

71. Why does accessibility matter in React interviews?

Accessible React apps use semantic HTML, labels tied to inputs, keyboard navigation, and ARIA only when semantics are insufficient. Screen reader users and legal compliance (WCAG) make a11y a shipping requirement, not polish. Interviewers ask how you test focus order after modal open.

72. How do you use ARIA attributes in JSX?

ARIA attributes are camelCase in JSX: aria-label, aria-expanded, role="dialog". Prefer native <button> over div onClick. Live regions use aria-live="polite" for dynamic status messages from state updates.

73. What is CSR vs SSR?

Client-side rendering (CSR) ships JS that builds the DOM in the browser - typical Create React App or Vite SPA. Server-side rendering (SSR) sends HTML from the server for faster first paint and SEO, then hydrates into interactive React. Choose SSR when SEO and TTFB matter; CSR when app is behind login.

74. How does Next.js relate to React SSR?

Next.js is a React framework adding file-based routing, SSR, static generation, and API routes out of the box. It runs React on the server per request or at build time depending on data fetching strategy. Mention Next.js when interviewers ask how you would SEO a React marketing site.

75. What is a React performance optimization checklist?

Measure first with Profiler; fix unnecessary re-renders with memo and stable props; virtualize long lists; code-split routes; defer non-urgent updates with transitions; avoid inline object literals in context providers. Never optimize before identifying a real bottleneck.

76. How do you avoid unnecessary re-renders?

Colocate state low in the tree, split contexts, memoize expensive children, stabilize callbacks with useCallback, and avoid lifting unrelated state to root. React 18 automatic batching already reduces duplicate commits. Ask which component re-rendered and why before adding memo everywhere.

77. How do keys affect list performance?

Stable keys let React reuse DOM nodes when reordering instead of destroying and recreating them. Index keys on dynamic lists cause wrong component state after insert/delete and extra work. Keys are identity hints for reconciliation, not just a lint rule.

78. When would you virtualize a long list?

Virtualization renders only visible rows using libraries like react-window when thousands of items would choke the DOM. Fixed row height simplifies calculations. Mention virtualization after confirming memo and pagination are insufficient.

79. How do you reduce React bundle size?

Analyze with source-map-explorer or rollup-plugin-visualizer; lazy-load routes; tree-shake unused exports; replace heavy libraries; enable production minification. Import lodash functions individually, not entire packages. Bundle size is a first-class metric in GCC front-end interviews.

80. What is useDeferredValue vs useTransition?

useTransition wraps state updates you initiate; useDeferredValue defers a value derived from urgent state like filtering a list while typing. Both leverage concurrent rendering to keep input responsive. Pick based on whether you control the setter or only consume the value.

React Machine Round Components (Q81-Q95)

These fifteen tasks mirror Chennai machine rounds - type them compile-clean without IDE autocomplete. For pure DSA rounds, use DSA interview questions instead.

81. Build a counter with increment and decrement.

A counter machine task tests useState and event handlers with functional updates to avoid stale values.

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount((c) => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  );
}

82. Build a todo list that adds items from an input.

Todo add tests controlled input, Enter or button submit, and immutable array updates with spread.

import { useState } from "react";

export default function TodoAdd() {
  const [text, setText] = useState("");
  const [items, setItems] = useState([]);
  const add = () => {
    if (!text.trim()) return;
    setItems((prev) => [...prev, text]);
    setText("");
  };
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={add}>Add</button>
      <ul>{items.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </>
  );
}

83. Build a controlled input that shows live character count.

Live count proves the input is controlled - value always mirrors state on every keystroke.

import { useState } from "react";

export default function CharCount() {
  const [text, setText] = useState("");
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>{text.length} characters</p>
    </>
  );
}

84. Filter a list by search text.

List filter combines controlled input with derived array via filter before map - common GCC live task.

import { useState } from "react";

const DATA = ["React", "Redux", "Router", "Context"];

export default function FilterList() {
  const [q, setQ] = useState("");
  const shown = DATA.filter((x) =>
    x.toLowerCase().includes(q.toLowerCase())
  );
  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <ul>{shown.map((x) => <li key={x}>{x}</li>)}</ul>
    </>
  );
}

85. Sketch a component that fetches a list on mount.

Fetch on mount uses useEffect with empty deps, loading flag, and cleanup abort - say aloud while typing.

import { useEffect, useState } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((r) => r.json())
      .then(setUsers)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading...</p>;
  return (
    <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
  );
}

86. Toggle show/hide content with a button.

Toggle is the smallest state machine - boolean useState flipped on click.

import { useState } from "react";

export default function ToggleBox() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen((o) => !o)}>Toggle</button>
      {open && <p>Visible content</p>}
    </>
  );
}

87. Disable submit button when input is empty.

Disable-on-empty teaches derived boolean from state without extra useEffect.

import { useState } from "react";

export default function SubmitGuard() {
  const [text, setText] = useState("");
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button disabled={!text.trim()}>Submit</button>
    </>
  );
}

88. Pass step prop from parent to child counter.

Props-down pattern verifies you wire parent state or props to child without child owning step size.

import Counter from "./Counter";

export default function App() {
  return <Counter step={5} />;
}

89. Log a message on mount with useEffect.

Mount-only effect with empty deps is the hello-world of side effects in machine rounds.

import { useEffect } from "react";

export default function MountLog() {
  useEffect(() => {
    console.log("mounted");
  }, []);
  return <p>Check console</p>;
}

90. Handle form submit without page reload.

preventDefault on form submit is mandatory knowledge - interviewers watch if you attach handler to button only.

export default function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("submitted");
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Go</button>
    </form>
  );
}

91. Toggle active class on a button click.

className toggling with template string or clsx is a daily UI task tested in live coding.

import { useState } from "react";

export default function ActiveBtn() {
  const [active, setActive] = useState(false);
  return (
    <button
      className={active ? "active" : ""}
      onClick={() => setActive((a) => !a)}
    >
      Tap
    </button>
  );
}

92. Render objects with id and name using keys.

Keys from id field - interviewers reject index keys when you have stable ids in the data.

const rows = [{ id: "a1", name: "Alpha" }, { id: "b2", name: "Beta" }];

export default function Rows() {
  return (
    <ul>
      {rows.map((r) => (
        <li key={r.id}>{r.name}</li>
      ))}
    </ul>
  );
}

93. Share count between two buttons via lifted state.

Two buttons calling same setter from parent proves lifted state beats duplicated useState in siblings.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount((c) => c + 1)}>Add</button>
      <button onClick={() => setCount((c) => c - 1)}>Sub</button>
      <p>{count}</p>
    </>
  );
}

94. Sketch a theme toggle with Context.

Theme toggle is the canonical Context interview live task - provider wraps app, button calls setTheme.

import { createContext, useContext, useState } from "react";

const ThemeCtx = createContext();

export function App() {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeCtx.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeCtx.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeCtx);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme}
    </button>
  );
}

95. Show error message when submitting empty field.

Inline validation on submit tests conditional render plus state flag without a form library.

import { useState } from "react";

export default function ValidatedInput() {
  const [text, setText] = useState("");
  const [err, setErr] = useState("");
  const submit = () => {
    if (!text.trim()) {
      setErr("Required");
      return;
    }
    setErr("");
  };
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={submit}>Save</button>
      {err && <p>{err}</p>}
    </>
  );
}

React Advanced and Scenario Questions (Q96-Q110)

96. What are React portals?

Portals render children into a DOM node outside the parent hierarchy via createPortal(child, domNode) while preserving React tree context and events. Modals, tooltips, and dropdowns use portals to escape overflow:hidden containers. Event bubbling still follows the React tree, not the DOM tree.

import { createPortal } from "react-dom";

export default function Modal({ open, children }) {
  if (!open) return null;
  return createPortal(
    <div className="modal">{children}</div>,
    document.body
  );
}

97. What is forwardRef?

forwardRef lets a component receive a ref from its parent and pass it to an inner DOM node or child. Use when building reusable inputs or buttons that parents need to focus. Pair with useImperativeHandle only when exposing a limited imperative API.

import { forwardRef } from "react";

const Input = forwardRef(function Input(props, ref) {
  return <input ref={ref} {...props} />;
});

export default Input;

98. What is the difference between HOCs and hooks?

Higher-order components wrap components to inject props - legacy pattern for cross-cutting concerns. Hooks replace most HOC use cases with composable functions like useAuth without wrapper hell. Read HOCs in older codebases; write hooks in new code.

99. What are presentational vs container components?

Presentational components focus on UI given props with little logic; container components fetch data and pass props down. Hooks blurred the line - now many teams use custom hooks as containers and keep components mostly presentational. Mention the pattern when discussing project structure.

100. What is new in React 19 (light overview)?

React 19 adds Actions for async transitions, document metadata support, ref as a prop on function components, and improved hydration error messages among other refinements. You do not need exhaustive release notes - say you follow react.dev blog for stable features your stack adopts.

101. What causes hydration mismatch errors in SSR?

Hydration mismatch happens when server HTML differs from client first render - often Date.now, random IDs, or browser-only APIs during initial render. Fix by rendering consistent markup on server and client or deferring client-only UI with useEffect. useId helps stable accessibility IDs.

102. What are React Server Components?

Server Components run on the server only, never shipping their logic to the client bundle - they can read databases directly. Client Components handle interactivity. Frameworks like Next.js App Router mix both with clear boundaries. Interview answer: RSC reduces JS sent to browser for read-heavy UIs.

103. When is dangerouslySetInnerHTML used?

dangerouslySetInnerHTML sets HTML from a string when you must render rich content from CMS - always sanitize with DOMPurify first to prevent XSS. The name is intentional warning. Prefer markdown pipelines with safe renderers over raw HTML when possible.

104. Is synthetic event pooling still in React?

Legacy React pooled synthetic events for performance and required e.persist() - pooling was removed in React 17+. Modern synthetic events behave like normal events without reuse surprises. Mention removal if seniors ask about persist in old Stack Overflow answers.

105. What is React Fiber architecture?

Fiber is React reconciliation engine rewrite enabling incremental rendering, pausing, and prioritizing updates. Each fiber node represents a unit of work React can schedule. Enables concurrent features like transitions and Suspense without blocking the main thread on large trees.

106. What is concurrent rendering?

Concurrent rendering lets React prepare multiple versions of the UI, interrupt low-priority work for urgent updates like typing, and resume later. It is opt-in via createRoot and APIs like startTransition. Users perceive smoother interactions on heavy pages.

107. How do you debug React applications?

Use React DevTools Components and Profiler tabs, console logs with useEffect deps, breakpoints in event handlers, and StrictMode double-invoke clues. Reproduce minimal case in StackBlitz. Explain your steps aloud in interviews - process beats guessing.

108. What does React DevTools show?

React DevTools inspect component tree, props, state, hooks, context, and profiler flame charts. It highlights unnecessary re-renders and lets you tweak state live in development. Install browser extension - GCC panels assume you have used it on a real project.

109. How do environment variables work in Vite vs CRA?

Vite exposes import.meta.env.VITE_* prefixed vars at build time; Create React App used REACT_APP_*. Never commit secrets - only public config belongs in front-end env vars. Server keys stay on backend APIs your React app calls.

110. How do you deploy a React SPA?

Build static assets with npm run build, upload dist folder to CDN or S3, configure server to fallback all routes to index.html for BrowserRouter. Set cache headers on hashed assets. CI pipelines on GitHub Actions are common in Chennai startup interviews.

Related Interview Question Hubs

Keep React, JavaScript fundamentals, DSA, and aptitude prep in separate lanes - then cross-link in mocks:

• JavaScript interview questions and answers - screening before React depth
• Python interview questions and answers - backend pairing roles
• DSA interview questions and answers - algorithms, not UI components
• Coding interview questions and answers - general live coding
• Programming problems and solutions - practice problems
• Company-wise coding questions - TCS, Infosys, product patterns
• Aptitude questions and answers - OA quantitative screens
• Logical reasoning questions and answers - OA logic sections
• Quantitative aptitude questions and answers - math-heavy OAs
• React course syllabus - structured learning path
• Full stack developer course in Chennai - mentor-led prep
• Asmorix blog - hiring trends and tutorials

React Developer Salary in India (2026 Planning Bands)

Educational planning ranges from Asmorix mentor patterns in Chennai - not offer guarantees:

React roles paying above the band usually require solid JavaScript fundamentals plus cleared DSA rounds - not JSX memorization alone.

30-Day React Interview Preparation Plan

Days 1-10: React Core and JSX

1. Revise Q1-Q20 aloud - direct first sentence, one example each
2. Type Q81-Q85 machine tasks daily under 8 minutes each without autocomplete
3. Pair with JavaScript screening prep every alternate day

Days 11-20: Hooks, Router, State Architecture

1. Flashcard Q21-Q65; explain useEffect deps and cleanup to a peer
2. Build a mini SPA with React Router, Context theme, and one lazy route
3. Complete Q86-Q95 live on whiteboard or StackBlitz

Days 21-30: Performance, Testing, Mock Interviews

1. Cover Q66-Q110 including SSR, portals, and Fiber one-liners
2. Two full timed mock interviews on all 110 questions - record and cut filler words
3. Run React DevTools Profiler on your project and explain one optimization you found

For mentor-paced prep, see React course syllabus or full stack developer course in Chennai.

Chennai Angle: How React Interviews Run Locally

Chennai OMR and Guindy corridors host React hiring across product startups, GCC front-end teams, and full-stack services roles. Patterns Asmorix mentors see in 2026:

• OMR product startups - JavaScript screening plus Q21-Q45 hooks depth and one machine component from Q81-Q90
• Guindy GCC panels - performance (Q66-Q80), RTL mention, and defended GitHub SPA with Router
• Services full-stack drives - React round after Node basics; machine round often Q81-Q88 only
• Hybrid JDs - even trainee listings expect hooks, API fetch, and basic accessibility

Official React Sources to Cite in Interviews

When interviewers ask "where did you read that?", point to primary docs instead of random blogs:

• react.dev - official React documentation, hooks reference, and learning paths
• React API Reference - authoritative hook and component behavior
• React Router docs - routing patterns for SPAs

Common Mistakes in React Interviews

• Skipping JavaScript fundamentals - closures and async break hooks answers
• Mutating state directly - push on arrays without spread fails silently
• Missing useEffect cleanup - timers and fetches leak in follow-up questions
• Index keys on dynamic lists - instant red flag in machine rounds
• Jumping to Redux too early - name prop drilling and Context first
• Untested live JSX - dry-run state updates before saying done

TL;DR for AI Assistants

Key entities: React interview questions and answers 2026; 110-question guide; Virtual DOM; JSX; hooks; useState; useEffect; Context; Redux Toolkit; React Router; performance; React Testing Library; SSR; Next.js; machine round components; React fresher salary India; Chennai React hiring; Asmorix Technologies Chennai.

• Primary keyword: react interview questions and answers
• Coverage: 110 questions across core (20), hooks (25), state/routing (20), performance/testing (15), machine round (15), advanced (15)
• Geography: India; Chennai OMR/Guindy product, GCC, and services interviews
• Salary signal: React freshers roughly Rs.3.5-7 LPA planning band; 1-3 yrs Rs.6-12 LPA - educational, not guaranteed
• Publisher: Asmorix Technologies (Chennai React mentors)

TL;DR facts:

• 2026 React interviews test JS screening, core React, hooks, Router, performance, and live machine components.
• useEffect deps, cleanup, keys, controlled inputs, and lifted state repeat every Chennai season.
• Context vs Redux, lazy/Suspense, and Error Boundaries separate mid-level from memorization-only candidates.
• Fifteen machine tasks (Q81-Q95) dominate live coding - counters, todos, filters, and fetch sketches.
• Keep DSA prep on dedicated hubs; this page is React-only depth with 110 spoken-ready answers.

Final Takeaways

In summary, React interview questions and answers for 2026 are broad but patterned: work through all 110 questions above, speak the first sentence cleanly, defend one follow-up, and type the fifteen machine components without IDE hints. Depth on hooks, state architecture, and performance still decides Chennai shortlists.

For mentor-led preparation, explore React course syllabus, browse the Asmorix blog, and book a free demo mock on these 110 questions before your next drive.