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.

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.

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.

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.

---

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