React Interview Questions and Answers (2026)

Master your React developer interview with these 50 essential questions. Includes detailed answers on Hooks, Virtual DOM, Concurrent Mode, React 19 Server Components, common pitfalls, and senior/lead architectural concepts.

The React Interview Landscape in 2026: Why React Mastery is Crucial

React continues to be the dominant frontend library globally. For engineering roles at Google, Meta, Netflix, Uber, Airbnb, and other top-tier product tech companies, your React capability is a direct indicator of your ability to build modular, high-performance, and scalable user interfaces.

React interviews do not just verify if you can write a useState hook. Interviewers evaluate your understanding of:

  1. Rendering Mechanics: How the reconciliation engine (Fiber) processes updates and maps changes to the real DOM.
  2. State Management & Data Flow: How data propagates through components, and when to use local state, context, or external stores (Zustand/Redux).
  3. Modern Architecture: Your comfort with modern standards like React Server Components (RSC), Suspense boundaries, and Concurrent rendering.
  4. Performance Optimization: How you identify bottlenecks, measure re-renders, and use memoization selectively.

This guide compiles the top 50 React interview questions, structured by category, to help you prepare thoroughly.

---

Section 1: Fundamentals (Components, JSX, Props, State)

Q1: What is the difference between Element and Component in React?

const element = <h1>Hello</h1>; // React Element (plain object)
function Welcome() { return <h1>Hello</h1>; } // React Component

Q2: What is the purpose of JSX? Does the browser understand it?

"JSX is syntactic sugar that makes writing component structures intuitive. During the build step, compiler tools transform JSX elements into nested React.createElement() function calls which the JS runtime executes."

Q3: What is the difference between Props and State?

"Props are like function parameters passed down to configure a component, whereas state is like variables declared inside a function to manage its own internal state."

Q4: Why is state mutation a bad practice in React?

// Bad: obj.value = 5; setObj(obj); (no re-render)
// Good:
setObj(prev => ({ ...prev, value: 5 }));

Q5: What is the purpose of the `key` prop in React lists?

"Keys tell React which list items are stable. Using unique IDs as keys prevents state mapping bugs when elements are dynamically reordered or deleted."

Q6: Explain Controlled vs Uncontrolled Components.

// Controlled: <input value={value} onChange={e => setValue(e.target.value)} />
// Uncontrolled: <input ref={inputRef} />

Q7: What is Prop Drilling and how can you avoid it?

"Prop drilling degrades code maintainability. We can bypass intermediate elements by using component composition or by establishing global context scopes for shared state."

---

Section 2: Hooks (useState, useEffect, useMemo, useCallback, useRef)

Q8: What are the Rules of Hooks in React?

  1. Only call hooks at the top level of your functional components (never inside loops, conditions, or nested functions).
  2. Only call hooks from React function components or custom hooks.
"Hooks must execute in the exact same order on every render. Calling them conditionally breaks React's tracking index array, causing unexpected state mismatches."

Q9: How does the cleanup function in `useEffect` work? When does it run?

  1. Before the effect runs again (when dependency variables update).
  2. When the component unmounts.

It is used to cancel subscriptions, abort fetch requests, or clear intervals.

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize); // clean up
}, []);

Q10: What is the difference between `useMemo` and `useCallback`?

"Use useMemo to cache expensive calculations. Use useCallback to cache callback functions passed to memoized children to prevent broken referential equality checks."

Q11: Explain the purpose of `useRef`. How does it differ from `useState`?

// Storing reference to DOM node or timer ID
const timerIdRef = useRef(null);
const startTimer = () => { timerIdRef.current = setInterval(() => {}, 1000); };
const stopTimer = () => { clearInterval(timerIdRef.current); };

Q12: How does `useContext` work? How do you prevent unnecessary renders when using it?

  1. Splitting context into state and dispatch context objects.
  2. Memoizing the provider value object.
  3. Splitting components into smaller memoized child wrappers.
"To optimize context, split state and dispatchers into separate providers. This ensures components that only trigger actions don't re-render when state variables update."

Q13: What is lazy state initialization in `useState`?

// Runs only once on mount
const [state, setState] = useState(() => {
  const saved = localStorage.getItem('key');
  return saved ? JSON.parse(saved) : defaultValue;
});

---

Section 3: Rendering & Reconciliation (Virtual DOM, Lifecycle)

Q14: Explain the Reconciliation process and the Diffing Algorithm.

"Reconciliation determines the minimal set of DOM mutations. By comparing structural element types and key identities between virtual trees, React updates only the layout nodes that actually changed."
   [State Update Triggered]
              |
              v
   [Generate New Virtual DOM]
              |
   (Diffing Algorithm: Compare types, props, and keys)
              v
   [Identify Delta Changes]
              |
              v
   [Commit Phase: Batch Update Real DOM]

Q15: What is the React Fiber architecture?

"Fiber introduces an incremental work scheduler. By breaking synchronous rendering into prioritized segments, React can pause rendering for urgent user input, ensuring smooth 60fps frame rates."

Q16: What is the difference between the Render Phase and Commit Phase?

"The render phase calculates the changes in the Virtual DOM and is interruptible. The commit phase writes those changes directly to the real DOM synchronously, executing side effects afterwards."

---

Section 4: Performance Optimization (Memoization, Lazy Loading)

Q17: When does a React component re-render?

  1. Its state updates.
  2. Its parent component re-renders.
  3. A consumed Context value changes.
"React triggers updates on state mutations, context updates, or parent re-renders. Use React.memo if you want to skip child rendering when its props remain unchanged."

Q18: How does `React.memo` work? When should you use it?

// Use it on pure presentation components that render frequently with identical props.
const MyComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

Q19: Explain Code Splitting and Dynamic Imports in React.

import React, { lazy, Suspense } from 'react';
const LargeChart = lazy(() => import('./LargeChart'));

function App() {
  return (
    <Suspense fallback={<div>Loading component...</div>}>
      <LargeChart />
    </Suspense>
  );
}

Q20: What is DOM Virtualization (Windowing)?

"Virtualization keeps page performance consistent by only rendering elements visible in the viewport. Libraries like react-window help manage this scroll viewport dynamically."

---

Section 5: State Management (Context, Redux, Zustand)

Q21: When should you use Context API vs Redux/Zustand?

"Use Context for static, low-frequency state. Use Zustand or Redux for complex, high-frequency updates where selective rendering updates via selectors are required for performance."

Q22: What are selectors in state management? Why are they useful?

// Zustand Example
const userName = useStore(state => state.user.name); // only re-renders if name changes

---

Section 6: Advanced Topics (Concurrent, RSC, Suspense)

Q23: What is Concurrent Rendering in React?

"Concurrent rendering allows React to schedule render tasks by priority. If a heavy update is running and a user clicks an input, React pauses the background render, updates the input instantly, and resumes the update."

Q24: What are React Server Components (RSC)? How do they differ from SSR?

"RSC is a component type that never ships JavaScript to the client. SSR is a technique to generate HTML on the server for hydration. RSC and SSR are complementary technologies."

Q25: How do Error Boundaries work in React? Can they catch errors in async code?

// Implement using getDerivedStateFromError and componentDidCatch.
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

---

Section 7: React 19 Specific Questions

Q26: What is the new `use` hook in React 19?

// Reading data from a promise conditionally
const data = use(fetchPromise);

Q27: How does the new `<form>` Action support work in React 19?

async function formAction(prevState, formData) {
  const email = formData.get('email');
  await subscribeUser(email);
}
const [state, action, isPending] = useActionState(formAction, null);
// <form action={action}>... <button disabled={isPending}>Submit</button>

Q28: Explain the `useFormStatus` hook in React 19.

"Call useFormStatus inside child inputs or submit buttons to determine if the parent form is pending, allowing them to disable themselves during processing."

---

Section 8: Component Design & Lifecycle

Q29: What is Component Composition? Why is it preferred over inheritance?

"Composition provides infinite flexibility. We pass layouts, sidebars, or headers as children props, avoiding strict subclass constraints."

Q30: What is the difference between `useEffect` and `useLayoutEffect`?

"Use useEffect for the majority of tasks. Switch to useLayoutEffect only if you need to calculate layouts or adjust element styles before the screen draws to prevent visual jitter."

---

Section 9: Advanced Performance

Q31: How do you optimize rendering performance in huge React lists?

  1. Implement virtualization using windowing libraries (like react-window).
  2. Wrap items in React.memo and verify referential equality of callbacks using useCallback.
  3. Ensure keys are unique, stable IDs (never array indexes).
  4. Keep local item components stateful if actions are isolated.
"Combine list virtualization with memoization of child nodes. Ensure callback props remain reference-stable using useCallback to prevent broken optimization checks."

Q32: Explain the concept of Code Splitting and the benefit of prefetching.

"Use dynamic imports for lazy loading heavy pages, and leverage resource hints like <link rel="prefetch"> to download code blocks before the user navigates to them."

---

Section 10: State Management Advanced (Redux vs Zustand)

Q33: How does Zustand compare to Redux?

"Zustand is lightweight and provides a clean hook-based model. Redux is highly structured and opinionated, making it suitable for massive apps with strict state logging requirements."

---

Section 11: Real-world Design Challenges

Q34: Design a custom Hook `useFetch` with caching, refetching, and abort capabilities.

const cache = new Map();
function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });
  useEffect(() => {
    if (cache.has(url)) {
      setState({ data: cache.get(url), loading: false, error: null });
      return;
    }
    const controller = new AbortController();
    setState(s => ({ ...s, loading: true }));
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        cache.set(url, data);
        setState({ data, loading: false, error: null });
      })
      .catch(error => {
        if (error.name !== 'AbortError') setState({ data: null, loading: false, error });
      });
    return () => controller.abort();
  }, [url]);
  return state;
}

Q35: Design an autocomplete search input box.

"An optimal autocomplete component requires a debounced listener, a local cache map for previously searched terms, and keyboard listener handlers for active navigation."

---

Top 20 Most Frequently Asked React Questions

  1. React 19 forms: How does useActionState simplify loading state handling?
  2. Virtual DOM definition: What is it and how does React use it to optimize updates?
  3. Strict Mode: Why does React double-render components in development? (To help discover side-effects in the render phase).
  4. Hooks array order: Why can't hooks be called inside loops?
  5. State batching: How does React batch state updates?
  6. ForwardRef: How does a parent component access a child's DOM node?
  7. Portals: How do you render components (like modals) outside the parent DOM hierarchy?
  8. HOC vs Render Props: How do you share behavior before hooks?
  9. React.Fragment: Why is wrapping nodes in fragments useful?
  10. State lifting: When do you lift state to parent scopes?
  11. Profiler API: How do you measure rendering durations?
  12. Next.js app directory: How does next route structures utilize RSC by default?
  13. Zustand selectors: Why are selectors essential to prevent re-renders?
  14. AbortController: How do you cancel pending effects?
  15. Hydration errors: What causes SSR hydration mismatches?
  16. Key index bug: What occurs if index is used as a list key during reorders?
  17. Refresher dependency: What happens if dependencies are omitted from useEffect?
  18. Custom hooks: How do they encapsulate states?
  19. Context performance: Why is context not suited for high-frequency updates?
  20. Error boundary limits: Why can't boundaries capture async code failures?

---

Senior React Interview Questions

  1. Explain the scheduling architecture in Concurrent Mode: How fiber node states prioritize user actions over asynchronous rendering.
  2. State management profiling: How do you resolve performance degradation caused by context re-renders in a deep tree structure?
  3. Micro-frontends layout: How to coordinate routing and state between multiple federated React applications safely.
  4. React Server Component hydration protocols: How RSC serialization payloads hydrate client components.

---

Google & Meta Style React Questions

  1. Virtual Windowing implementation: Code a custom scroll virtualization list container from scratch.
  2. Custom scheduler: Write a prioritizer helper that queues state updates based on browser framerates.
  3. Real-time sync: Design a collaborative form component that handles concurrent edits and prevents inputs overwriting each other.

---

Quick Revision Notes

---

5 Interview Tips

  1. Draw reconciliation: Explain the virtual DOM vs real DOM update cycles.
  2. Discuss layout costs: Mention performance trade-offs of using useLayoutEffect vs useEffect.
  3. Prioritize clean code: Keep variable naming readable and logical during live coding.
  4. Validate edge cases: Add checks for empty arrays, loading states, and network errors.
  5. Be collaborative: Pause and confirm approach steps with your interviewer.

---

Frequently Asked Questions (FAQs)

#### Q: Does React 19 replace state management libraries?

A: No. React 19 form actions simplify request pending states, but complex application state workflows still benefit from stores like Zustand.

#### Q: Why can't I call hooks conditionally?

A: React relies on the call order of hooks to match state blocks. Conditional calls scramble this sequence index.

#### Q: How do you identify performance issues in React?

A: Use the React DevTools Profiler to capture render counts and durations, noting which props triggered changes.

#### Q: What is code splitting?

A: Splitting single bundle JS files into on-demand dynamic import chunks, managed via Suspense wrappers.

---

Ready to Master Your React Technical Round?

Practicing questions is crucial, but simulating real interviews builds true confidence.

Get Real-Time Interview Practice with InterviewMantra

[👉 Start a Free AI Mock Interview Now](https://interviewmantra.in/register)

Frequently Asked Questions

Does React 19 replace state management libraries?

No. React 19 form actions simplify request pending states, but complex application state workflows still benefit from stores like Zustand.

Why can't I call hooks conditionally?

React relies on the call order of hooks to match state blocks. Conditional calls scramble this sequence index.

How do you identify performance issues in React?

Use the React DevTools Profiler to capture render counts and durations, noting which props triggered changes.

What is code splitting?

Splitting single bundle JS files into on-demand dynamic import chunks, managed via Suspense wrappers.