I’ve conducted over 50 React interviews. These are the questions that actually come up — not obscure trivia, but the questions that separate candidates who use React from candidates who understand React. You’ll also want to be solid on JavaScript fundamentals since React interviews often test both.

1. What’s the difference between state and props?

Props are passed from parent to child (read-only). State is managed within a component (mutable via setState/useState). Props flow down, state is local.

The follow-up they’re really asking: “Do you understand one-way data flow?“

2. Why do hooks have rules (and what are they)?

• Only call hooks at the top level (not inside loops, conditions, or nested functions)
• Only call hooks from React functions (not regular JS functions)

Why: React relies on the order hooks are called to match state to the correct hook. Conditional hooks break this ordering.

// ❌ Breaks hook ordering
if (loggedIn) {
  const [user, setUser] = useState(null);
}

// ✅ Always call, conditionally use
const [user, setUser] = useState(null);
if (loggedIn) { /* use user */ }

3. When does a component re-render?

A component re-renders when:

1. Its state changes (setState/useState setter)
2. Its parent re-renders (unless wrapped in React.memo)
3. A context it consumes changes

Not when props change — that’s a common misconception. It re-renders because the parent re-rendered, and the parent passes new props as a side effect.

4. What’s the difference between useMemo and useCallback?

• useMemo memoizes a value (the result of a computation)
• useCallback memoizes a function (the function reference itself)

const expensiveValue = useMemo(() => computeExpensive(data), [data]);
const handleClick = useCallback(() => doSomething(id), [id]);

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

5. How do you prevent unnecessary re-renders?

1. React.memo — skip re-render if props haven’t changed
2. useMemo/useCallback — stabilize values/functions passed as props
3. Move state down — keep state in the lowest component that needs it
4. Split components — isolate frequently-changing state into smaller components

6. What’s the virtual DOM and why does React use it?

The virtual DOM is a lightweight JavaScript representation of the real DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one, and applies only the minimal changes to the real DOM.

Why: Direct DOM manipulation is slow. Batching changes through a virtual DOM is faster for most UI updates. This is one of the key differences when comparing React vs Angular — Angular uses a different change detection strategy.

7. Explain useEffect cleanup

useEffect(() => {
  const subscription = api.subscribe(id);
  
  return () => {
    subscription.unsubscribe(); // Cleanup runs before next effect or unmount
  };
}, [id]);

Cleanup runs: (1) before the effect re-runs with new dependencies, and (2) when the component unmounts. It prevents memory leaks from subscriptions, timers, and event listeners.

8. What’s the difference between controlled and uncontrolled components?

Controlled: React state drives the input value. Every keystroke triggers setState.

<input value={name} onChange={e => setName(e.target.value)} />

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

<input ref={inputRef} defaultValue="initial" />

Use controlled for forms that need validation or dynamic behavior. Use uncontrolled for simple forms where you only need the value on submit.

9. How do you share state between components that aren’t parent-child?

1. Lift state up — move state to the nearest common ancestor
2. Context API — for global-ish state (theme, auth, locale)
3. State management library — Zustand, Jotai, or Redux for complex state
4. URL state — for state that should survive page refreshes (search params)

10. What are React Server Components?

Server Components render on the server and send HTML to the client — no JavaScript bundle for that component. They can directly access databases, file systems, and APIs without an API layer.

Client Components (marked with 'use client') run in the browser and handle interactivity (state, effects, event handlers).

The mental model: Server Components for data fetching and static content. Client Components for interactivity. If you’re new to this paradigm, our What is Next.js guide covers the full picture.

11. How do you handle errors in React?

Error Boundaries catch rendering errors in child components:

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;
  }
}

Error boundaries don’t catch errors in event handlers, async code, or server-side rendering. For those, use try/catch.

12. What’s the key prop and why does it matter?

Keys help React identify which items in a list changed, were added, or removed. Without stable keys, React re-renders the entire list on every change.

// ❌ Index as key — breaks when list order changes
{items.map((item, i) => <Item key={i} />)}

// ✅ Stable unique ID
{items.map(item => <Item key={item.id} />)}

13. How do you optimize a large list?

Use virtualization — only render the items visible in the viewport:

import { FixedSizeList } from 'react-window';

<FixedSizeList height={600} itemCount={10000} itemSize={50}>
  {({ index, style }) => <div style={style}>{items[index].name}</div>}
</FixedSizeList>

Libraries: react-window (lightweight) or react-virtuoso (more features).

14. What’s Suspense and how does it work?

Suspense lets you show a fallback while waiting for async content:

<Suspense fallback={<Spinner />}>
  <LazyComponent />
</Suspense>

Works with: React.lazy() for code splitting, Server Components for data fetching, and libraries that integrate with Suspense (like Relay or SWR).

15. Describe a React performance issue you’ve debugged

This is the question that separates real experience from tutorial knowledge. Have a real story ready:

• “We had a dashboard with 50 charts re-rendering on every filter change. I used React DevTools Profiler to find that the context provider was at the root, causing everything to re-render. I split the context into separate providers for filters vs. data, reducing re-renders by 80%.”

The interviewer wants to hear: the problem, how you found it, what you tried, and the result.

FAQ

What React questions are asked in senior interviews?

Senior React interviews focus on performance optimization, state management architecture, Server Components, error boundaries, and real debugging stories. You’ll be asked about re-render prevention, virtualization, context splitting, and when to use external state libraries vs. built-in React state.

Do I need to know hooks for React interviews?

Absolutely. Hooks are the foundation of modern React. You need to understand useState, useEffect (including cleanup), useMemo, useCallback, useRef, and custom hooks. Interviewers expect you to explain the rules of hooks and why they exist, not just how to use them.

Should I learn Next.js for React interviews?

If the company uses Next.js, yes. Even if they don’t, understanding Server Components and the app router shows you’re current with the React ecosystem. Many senior React roles in 2026 expect familiarity with a meta-framework like Next.js or Remix.

How do I prepare for React interviews?

Build something non-trivial that uses hooks, context, error boundaries, and performance optimization. Be ready to explain re-render behavior, the virtual DOM diffing algorithm, and controlled vs. uncontrolled components. Use React DevTools Profiler on your own projects to practice identifying performance issues.

---

Related: JavaScript Interview Questions · TypeScript Interview Questions · React Hooks Cheat Sheet