React Interview Questions: The Ultimate 2026 Guide

React remains the most in-demand frontend framework in 2026. Whether you're interviewing for a frontend, full-stack, or UI engineer role, you'll face React interview questions. This guide covers everything from fundamentals to advanced patterns.

Core Concepts

What is the Virtual DOM and how does React use it?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM. When state changes, React creates a new Virtual DOM tree, diffs it against the previous one (reconciliation), and applies only the minimal set of changes to the real DOM. This makes updates efficient compared to manipulating the DOM directly.

What is JSX?

JSX is a syntax extension that lets you write HTML-like code in JavaScript. It gets compiled to React.createElement() calls by Babel/SWC. JSX is not HTML — key differences include using className instead of class, htmlFor instead of for, and camelCase for event handlers.

Functional vs Class Components

In 2026, functional components with hooks are the standard. Class components are legacy but still appear in older codebases. Key differences:

• Functional components are simpler, use hooks for state and lifecycle
• Class components use this.state, this.setState(), and lifecycle methods
• Hooks cannot be used in class components

Hooks Deep Dive

When should you use useReducer over useState?

Use useReducer when:

• State logic is complex with multiple sub-values
• The next state depends on the previous state
• You need predictable state transitions (like a state machine)

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.text, done: false }];
    case 'TOGGLE':
      return state.map(t => t.id === action.id ? { ...t, done: !t.done } : t);
    case 'DELETE':
      return state.filter(t => t.id !== action.id);
    default:
      return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  // ...
}

What are the rules of useEffect?

• No dependency array — runs after every render
• Empty array [] — runs once on mount, cleanup on unmount
• With dependencies [a, b] — runs when a or b changes
• Cleanup function — returned function runs before re-running effect or on unmount

useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = (e) => setData(JSON.parse(e.data));

  return () => ws.close(); // cleanup
}, [url]); // re-run when url changes

When to use useMemo and useCallback?

useMemo memoizes a computed value. useCallback memoizes a function reference. Use them when:

• Passing callbacks to optimized child components that use React.memo
• Expensive computations that shouldn't re-run on every render
• Values used as dependencies in other hooks

Don't overuse them. Memoization has overhead. Only use when you've identified a real performance issue.

How do you create custom hooks?

Custom hooks extract reusable stateful logic. They start with "use" and can call other hooks.

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

State Management

How do you avoid prop drilling?

• Context API — Built-in, good for low-frequency updates (theme, auth, locale)
• State libraries — Zustand, Jotai, or Redux for complex global state
• Component composition — Pass components as children instead of data through props

Why can Context API cause performance issues?

When context value changes, ALL components consuming that context re-render — even if they only use a slice of the value. Solutions:

• Split contexts by concern (AuthContext, ThemeContext, etc.)
• Memoize context values with useMemo
• Use state management libraries for high-frequency updates

Performance Optimization

What does React.memo do?

React.memo is a higher-order component that skips re-rendering if props haven't changed (shallow comparison). Use it for components that render often with the same props.

const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return items.map(item => (
    <div key={item.id}>{item.name}</div>
  ));
});

How do you implement code splitting?

const Dashboard = React.lazy(() => import('./Dashboard'));

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

What is list virtualization?

For lists with thousands of items, render only the visible rows. Libraries like react-window or @tanstack/react-virtual handle this. Only render what's in the viewport — dramatically reduces DOM nodes.

Common Patterns

Controlled vs Uncontrolled Components

Controlled: React state drives the input value. You handle every change via onChange.

Uncontrolled: The DOM manages the value. You read it with a ref when needed.

Use controlled components for forms that need validation, conditional logic, or real-time formatting.

Error Boundaries

Error boundaries catch JavaScript errors in child component trees. They're still class components (no hook equivalent yet).

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) return <h2>Something went wrong.</h2>;
    return this.props.children;
  }
}

React 19 Features to Know

• Server Components — Components that render on the server, reducing client-side JS
• Actions — Simplified form handling with server-side mutations
• use() hook — Read promises and context directly in render
• Compiler (React Forget) — Automatic memoization, reducing the need for useMemo/useCallback

Conclusion

Mastering these React interview questions prepares you for frontend roles at any company. Focus on hooks, performance optimization, and state management patterns. Pair this with strong JavaScript fundamentals and a solid FAANG preparation plan for the best results.

Preparing for a frontend interview? Try InterviewAlly free — get AI-powered real-time assistance during your interview practice.