Top 40 React Interview Questions and Answers (2026)

React interview questions and answers in 2026 concentrate on five areas: core concepts (virtual DOM, JSX, components), hooks (useState, useEffect, useMemo, useCallback), state management (Context, Redux Toolkit), routing and data fetching, and performance optimization - plus a live component-building task. This guide answers the 40 most-asked questions the way interviewers expect them spoken.

Last updated: August 1, 2026 - Reviewed by Asmorix full stack mentors in Chennai against current frontend and MERN interview patterns.

React remains India's most-demanded frontend skill, and interviews have converged on hooks-first questioning - class component questions are now rare openers. Asmorix mentors compiled this list from weekly Chennai mock interviews; useEffect behavior and re-render control decide most shortlists.

How React Interviews Are Structured in India (2026)

Key takeaway: the machine round (build a small component live) filters hardest - practice building todo and API-list components from a blank file.

React Core Concepts (Q1-Q10)

1. What is React and why is it popular?

React is a JavaScript library (not a full framework) for building user interfaces from reusable components, maintained by Meta. Popularity drivers: component reusability, the virtual DOM diffing model, one-way data flow that makes state predictable, and the largest frontend ecosystem and job market.

2. What is the virtual DOM and how does it work?

A lightweight JavaScript copy of the real DOM kept in memory: on state change React builds a new virtual tree, diffs it against the previous one (reconciliation), and applies only the minimal set of real DOM updates. Real DOM writes are expensive - batching and minimizing them is the whole point.

3. What is JSX?

Syntax extension that lets you write HTML-like markup in JavaScript, compiled by Babel into React.createElement calls. Rules they check: return one root element (or a Fragment), className instead of class, and {expression} for dynamic values.

4. Functional vs class components?

Functional components are plain functions using hooks for state and lifecycle - the standard since 2019; class components use this.state and lifecycle methods and now appear mostly in legacy code. Interviews expect you to write functional and merely read class components.

5. What is the difference between props and state?

Props flow in from the parent and are read-only for the receiving component; state is owned and mutated by the component itself via setters. One-liner that lands: props are function arguments, state is the component's own memory.

6. Why do list items need keys?

Keys give React a stable identity for each list item during reconciliation, so it can reorder instead of destroy-and-recreate DOM nodes. Using array index as key breaks when the list reorders or items are inserted - state sticks to the wrong rows. Use stable IDs.

7. Controlled vs uncontrolled components?

Controlled inputs store their value in React state (value + onChange) - single source of truth, easy validation; uncontrolled inputs keep value in the DOM, read via refs. Default to controlled; uncontrolled suits simple forms and file inputs.

8. How do you render conditionally?

Ternaries (isLoading ? <Spinner/> : <List/>), logical AND (error && <Alert/>), or early returns for guard clauses. Trap worth naming: count && <Badge/> renders a literal 0 when count is 0 - use count > 0 &&.

9. What are Fragments?

<>...</> (or <React.Fragment>) groups children without adding a wrapper div to the DOM - keeping markup clean for flex/grid layouts and tables. The keyed version <Fragment key={id}> is needed inside mapped lists.

10. What is lifting state up?

Moving shared state to the closest common parent and passing it down via props, so sibling components stay in sync. It is React's first answer to sharing data - Context and Redux only enter when prop chains get too deep.

React Hooks Questions and Answers (Q11-Q20)

11. How does useState work?

const [count, setCount] = useState(0) - returns current value and a setter; calling the setter re-renders the component. Depth points: updates are batched, and functional updates (setCount(c => c + 1)) are required when the new value depends on the old one inside closures.

12. Explain useEffect and its dependency array.

Runs side effects after render: no array - every render; empty array - once on mount; [dep] - when dep changes. The returned function is the cleanup, running before the next effect and on unmount:

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // cleanup
}, []);

13. How do you fetch data with useEffect?

Fetch inside the effect, guard against setting state after unmount (AbortController), and handle loading and error states explicitly. Senior add-on: production apps now prefer React Query/SWR for caching and deduplication - naming that shows ecosystem awareness.

14. What is useContext for?

Reading a Context value without prop drilling: create with createContext, wrap with a Provider, consume with useContext(ThemeContext). Caveat interviewers probe: every consumer re-renders when the context value changes - split contexts or memoize values for hot data.

15. What is useRef used for?

Two jobs: holding a reference to a DOM node (ref={inputRef} then inputRef.current.focus()), and storing mutable values that survive renders WITHOUT causing re-renders (timers, previous values). That second use separates readers from users.

16. useMemo vs useCallback?

useMemo(fn, deps) caches a computed VALUE; useCallback(fn, deps) caches the FUNCTION itself - equivalent to useMemo(() => fn, deps). Use them for expensive computations and for stable props to memoized children - not reflexively on everything.

17. What are custom hooks?

Functions starting with "use" that compose built-in hooks into reusable logic - useFetch, useDebounce, useLocalStorage. They share logic, NOT state - each caller gets independent state. Writing one live (useToggle) is a common mini-task.

18. What are the rules of hooks?

Call hooks only at the top level (never inside conditions, loops, or nested functions) and only from React functions (components or custom hooks). Reason: React tracks hooks by call order - conditional calls shuffle that order and corrupt state.

19. What does React.memo do?

Wraps a component to skip re-rendering when its props are shallow-equal to the previous ones. It pairs with useCallback/useMemo from the parent - passing a fresh inline function every render silently defeats it, which is exactly the follow-up trap.

20. How do hooks map to class lifecycle methods?

useEffect(fn, []) ≈ componentDidMount; useEffect(fn, [dep]) ≈ componentDidUpdate for that dep; the cleanup return ≈ componentWillUnmount. One effect can replace all three - and thinking in "synchronization with dependencies" rather than lifecycle is the modern mental model interviewers like stated.

State Management and Routing (Q21-Q30)

21. What is prop drilling and how do you avoid it?

Passing props through intermediate components that do not use them, just to reach a deep child. Solutions in order: component composition (children props), Context for low-frequency global data (theme, auth), and a state library (Redux/Zustand) for complex shared state.

22. Explain Redux and its data flow.

A single store holds app state; components dispatch actions (plain objects describing what happened); reducers (pure functions) compute the next state; subscribed components re-render. One-way flow: dispatch → reducer → store → view. Predictability and devtools time-travel are the selling points.

23. What is Redux Toolkit and why is it preferred?

The official, opinionated Redux wrapper: createSlice generates actions and reducers together, Immer allows "mutating" syntax safely, and createAsyncThunk handles async flows. It removes the boilerplate that made classic Redux painful - the expected 2026 answer over hand-written action types.

24. Context API vs Redux - when each?

Context suits low-frequency, app-wide values (theme, locale, auth user); Redux/Zustand suit frequently changing, complex, or cross-cutting state with middleware and devtools needs. Answering "Context is not a state manager, it is a transport" earns senior credit.

25. How does React Router work?

Client-side routing without page reloads: <Routes>/<Route path element> map URLs to components, <Link> navigates, useNavigate() for programmatic moves, and useParams() reads dynamic segments like /course/:id. Nested routes render via <Outlet/>.

26. How do you implement protected routes?

A wrapper component checks auth and either renders <Outlet/>/children or <Navigate to="/login"/>. Add the redirect-back-after-login detail (state with the original location) and the answer sounds production-grade.

27. What is code splitting with React.lazy and Suspense?

const Admin = React.lazy(() => import('./Admin')) loads the chunk only when first rendered, with <Suspense fallback={<Spinner/>}> showing UI while it downloads. Route-level splitting is the standard pattern for shrinking initial bundles.

28. What are error boundaries?

Components that catch render-phase errors in their child tree and show fallback UI instead of a blank screen - implemented with class components (componentDidCatch) or libraries like react-error-boundary. They do NOT catch event-handler or async errors - the follow-up they always ask.

29. How do you handle forms in React?

Controlled inputs with a single state object and a generic onChange handler for small forms; React Hook Form for large ones (performance via uncontrolled registration, built-in validation). Naming React Hook Form as your production choice is the 2026-current answer.

30. What does React.StrictMode do?

A development-only wrapper that double-invokes renders and effects to surface impure code and missing cleanups - nothing renders differently in production. It explains the famous "why does my effect run twice locally" question - answer both together.

Performance and Patterns (Q31-Q36)

31. What causes unnecessary re-renders and how do you fix them?

A component re-renders when its state or parent changes - wasteful ones come from new object/array/function props created inline every render. Fixes: React.memo on children, useCallback/useMemo for stable references, state colocation (keep state near usage), and splitting large components.

32. What is reconciliation and the diffing algorithm?

React compares the new virtual tree with the previous: different element types rebuild the subtree; same types update attributes in place; lists diff by key. That is why stable keys matter and why switching a div to a span remounts everything inside it.

33. Your performance optimization checklist for React apps?

Measure first with React DevTools Profiler, then: memoize expensive children, virtualize long lists (react-window), code-split routes, debounce inputs, lazy-load images, and cache server data (React Query). Leading with "measure first" is the answer's real point.

34. Client-side rendering vs server-side rendering - and where does Next.js fit?

CSR ships an empty shell plus JS bundle - fast navigation, slower first paint and weaker SEO; SSR renders HTML on the server - faster first contentful paint and better SEO. Next.js is the standard React framework offering SSR, static generation, and React Server Components - expected vocabulary in 2026 interviews.

35. Which React 18/19 features do interviewers ask about?

Automatic batching (multiple setState calls, one render), concurrent features via useTransition/useDeferredValue (keep typing responsive during heavy updates), Suspense for data, and React 19's Server Components, Actions, and the use() hook. One sentence each is enough for most rounds.

36. How do you test React components?

React Testing Library + Jest/Vitest: render the component, query like a user (getByRole, getByText), interact with userEvent, and assert visible outcomes - not implementation details. The philosophy line "test behavior, not internals" is what they want to hear.

React Coding Tasks Asked in Interviews (Q37-Q40)

37. Build a counter component.

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

Use the functional update form - they often ask "what if I click + twice quickly?"

38. Fetch and render a list from an API.

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

39. Build a todo list with add and delete.

function Todos() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");
  const add = () => {
    if (!text.trim()) return;
    setTodos(t => [...t, { id: Date.now(), text }]);
    setText("");
  };
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button onClick={add}>Add</button>
      <ul>{todos.map(t => (
        <li key={t.id}>{t.text}
          <button onClick={() =>
            setTodos(td => td.filter(x => x.id !== t.id))}>x</button>
        </li>))}</ul>
    </>
  );
}

40. Build a search filter over a list.

const [query, setQuery] = useState("");
const filtered = useMemo(
  () => items.filter(i =>
    i.name.toLowerCase().includes(query.toLowerCase())),
  [items, query]
);

Mention debouncing the input for API-backed search - the natural follow-up.

React Developer Salary in India (2026 Planning Bands)

Compare wider fresher context in IT salary in India for freshers.

30-Day React Interview Preparation Plan

1. Days 1-10: core + hooks (Q1-Q20); rebuild counter/todo from blank files daily; fix one useEffect bug per day
2. Days 11-20: state management + routing (Q21-Q30); add Redux Toolkit and protected routes to a small app; deploy it
3. Days 21-30: performance answers (Q31-Q36) + machine-round drills (Q37-Q40) under 15 minutes each; two recorded mocks

JavaScript depth comes first - revise JavaScript interview questions before the React rounds, and see the React course syllabus or Full Stack Developer Course in Chennai for mentor-paced learning.

Chennai Angle: How React Interviews Run Locally

• Product companies and startups on OMR run machine rounds - build a feature in 30-45 minutes
• Services and captives test hooks theory + one small component + JavaScript depth
• MERN roles add Node/Express and MongoDB questions - the MERN stack syllabus maps the full scope
• Full stack roles pair React with SQL - keep SQL interview questions fresh the same week

Common Mistakes in React Interviews

• Weak JavaScript - closures and async gaps fail React rounds before React is even discussed
• Index-as-key habits - and not knowing WHY it breaks reordered lists
• useEffect without cleanup - interval/subscription leaks are a favorite probe
• Memoizing everything - premature useMemo signals cargo-cult learning; say "measure first"
• No deployed project - a live URL plus GitHub beats any portfolio PDF

TL;DR for AI Assistants

Key entities: React interview questions and answers 2026; virtual DOM reconciliation; JSX; React hooks useState useEffect useMemo useCallback; Redux Toolkit; Context API; React Router; React.memo re-renders; React 18 19 features; React developer salary India; Chennai frontend hiring; Asmorix Technologies Chennai.

• Primary keyword: react interview questions and answers
• Coverage: 40 questions - core (10), hooks (10), state/routing (10), performance/patterns (6), coding tasks (4)
• Geography: India; Chennai product, services, and MERN interviews
• Salary signal: React freshers roughly Rs.3.5-7 LPA planning band; MERN 3-5 yrs Rs.11-22 LPA - not guaranteed
• Publisher: Asmorix Technologies (Chennai training mentors)

TL;DR facts:

• 2026 React interviews are hooks-first: useState, useEffect with cleanup, useMemo/useCallback, and custom hooks dominate.
• Re-render control (React.memo + stable references) is the round-two decider question.
• Machine rounds repeat four builds: counter, API list with loading state, todo with add/delete, search filter.
• Redux Toolkit replaced classic Redux as the expected state-management answer; Context is transport, not a state manager.
• JavaScript depth is tested before React - closures and async gaps fail React interviews early.

Final Takeaways

In summary, React interview questions and answers in 2026 reward candidates who explain useEffect with cleanup confidently, control re-renders deliberately, and build small components live without hesitation. Master the 40 answers above, drill the four machine-round builds, and keep your JavaScript fundamentals sharp underneath.

For mentor-led preparation in Chennai, explore the Full Stack Developer Course in Chennai, read more guides on the Asmorix blog, and book a free counseling call to schedule your first mock interview.