React Interview Questions (2026): 25 Real Q&As

Experienced React interviews test more than JSX syntax. They test whether you can reason about state ownership, rendering, performance, accessibility, testing, and the cost of architectural choices.

This guide focuses on practical React questions. Each answer states the decision, the trade-off, and a small example you can explain in an interview.

Quick Answers

• What is useRef for? Mutable values or DOM references that must persist without causing a render.
• What is the best state location? The lowest common owner that needs the state.
• How do you improve performance? Measure first, then reduce work, data, bundle size, and unnecessary renders.
• How do you handle accessibility? Treat keyboard, semantics, focus, labels, and announcements as part of the feature.
• What makes an experienced answer strong? It explains constraints and failure modes, not only API names.

Hooks And State

1. What is the difference between useRef and useState?

useState stores data that affects the rendered output. Updating it schedules a render. useRef stores a mutable value that survives renders without scheduling one.

const renderCount = useRef(0);
const [query, setQuery] = useState("");

renderCount.current += 1;

Use a ref for a DOM node, an interval ID, or a previous value. Use state when the user must see the value change.

2. When should you use useReducer instead of useState?

Use useReducer when state transitions are related, when several actions update the same state, or when the transition rules need to be tested separately.

type Action = { type: "increment" } | { type: "reset" };

function reducer(count: number, action: Action) {
    if (action.type === "reset") return 0;
    return count + 1;
}

Do not use a reducer only to make a small boolean or input state look more complex.

3. What are the rules of Hooks?

Call Hooks only at the top level of a React function component or custom Hook. Do not call them inside loops, conditions, nested functions, or ordinary utility functions.

React uses call order to match Hook state to the correct call. Changing that order breaks the mapping.

4. When should an effect run?

An effect should synchronize React with an external system, such as a browser API, subscription, timer, or network client. It should not be used to calculate derived values that can be calculated during render.

Always include the values used by the effect in its dependency list, unless a documented stable reference makes that unnecessary.

5. How do you clean up an effect?

Return a cleanup function that removes listeners, clears timers, unsubscribes, or cancels work:

useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
}, []);

6. What is state colocation?

State colocation means keeping state close to the components that use it. It reduces prop drilling, limits re-renders, and makes ownership easier to understand.

Lift state only when two or more parts of the tree need the same source of truth.

Rendering And Performance

7. Why does a React component render again?

A component can render when its state changes, when its parent renders, when a context value changes, or when a subscribed external store changes. A render is not automatically a performance problem.

Measure the expensive work before adding memo, useMemo, or useCallback.

8. How do you prevent unnecessary renders?

Start with state ownership and component boundaries. Then stabilize object or function identities only when a measured child or calculation benefits from it. Avoid passing a new object to a memoized child on every render.

9. What is the difference between useMemo and useCallback?

useMemo caches a calculated value. useCallback caches a function reference. Both are performance tools, not correctness tools. They add complexity and should support a measured optimization.

10. How do you optimize a large list?

Reduce the data rendered, use stable keys, paginate or virtualize when needed, avoid expensive work in each row, and keep row state local. Test keyboard navigation and screen-reader behavior after virtualization.

11. How do you reduce JavaScript cost in a React application?

Load non-critical components only when needed, split large routes, remove unused dependencies, optimize images, and measure the production bundle. A smaller bundle improves download, parse, and execution time.

Use the Bundle Risk Analyzer to inspect dependency risk and package bloat.

12. What is a controlled input?

A controlled input receives its value from React state and reports changes through an event handler. It gives the application one source of truth and makes validation and formatting predictable.

Use an uncontrolled input when the browser should own the value and React only needs it at submit time.

Architecture

13. When should state move into context?

Use context when many components need the same value and the value has a clear provider boundary. Avoid putting rapidly changing or unrelated state into one broad context because all consumers can re-render.

14. How do you structure a large React application?

Group code around product features and ownership. Keep pure domain logic separate from UI. Define clear boundaries for server data, client state, forms, and shared primitives.

The structure should make a feature easy to change without requiring unrelated teams or pages to understand its internals.

15. How do you decide between local state and a state library?

Use local state for local UI concerns. Use a state library only when the application has a real need for shared client state, synchronization, caching, or complex transitions that local state cannot manage clearly.

16. How do you handle server data?

Choose a data ownership model first. Decide which data is rendered on the server, which data changes in the browser, how it is cached, and how loading and error states are represented.

Do not copy server data into client state without a clear reason.

Testing And Accessibility

17. What should a React component test?

Test behavior that a user can observe. Render the component, perform an interaction, and assert the visible result, accessible state, or callback effect. Avoid tests that depend on internal state variable names.

18. How do you test asynchronous UI?

Start the interaction, wait for the visible result, and assert loading, success, and error states. Test the failure path. A component that only works when the network succeeds is incomplete.

19. How do you make a form accessible?

Give every control a label, connect errors with aria-describedby, mark invalid controls with aria-invalid, support keyboard submission, keep focus visible, and announce important asynchronous status changes.

Use the Accessibility Quick Audit to review common page issues.

20. How do you make a custom modal accessible?

Use a dialog pattern with a label, focus management, Escape handling, focus restoration, and a clear background interaction model. A modal is not accessible because it has role="dialog" alone.

21. What is the difference between an error message and a live region?

An error message explains an invalid or failed action. A live region announces a dynamic status change. Use role="alert" for urgent errors and a polite live region for normal progress or success messages.

Practical React Decisions

22. When should you use a React Server Component?

Use a Server Component when the component can render on the server and does not need browser state, event handlers, or browser APIs. Keep interactive behavior in a small client component at the leaf.

23. How do you debug a slow React page?

Measure the page. Check network waterfalls, server time, JavaScript size, long tasks, rendering work, image cost, and layout shifts. Change one cause at a time and verify with production-like data.

Read the Lighthouse performance guide for a complete example.

24. How do you review a React pull request?

Check behavior, state ownership, error paths, accessibility, performance cost, tests, privacy, and maintainability. Ask whether the change solves the user problem with the least new complexity.

25. What separates a senior React developer from a syntax-focused developer?

A senior developer explains trade-offs. They know when not to add a library, when to move work to the server, how to protect users from invalid states, and how to measure whether a change improved the product.

Interview Checklist

• Explain useRef, useState, useReducer, and effects with examples.
• Explain state ownership and component boundaries.
• Explain how you measure and reduce rendering and bundle cost.
• Explain form validation and accessibility behavior.
• Explain how you test success and failure states.
• Explain Server and Client Component boundaries.
• Explain one performance problem you diagnosed and fixed.
• Explain one trade-off you made in a real product.

Strong React answers connect the API to a user problem, a constraint, and a way to verify the result.