202 React interview questions with answers
202 React interview questions with detailed answers, sorted from basic to advanced. Free to practice, with progress saved automatically.
All React interview questions
What is JSX and why does React use it?
Browsers do not understand JSX — so what does JSX actually run as?
What are the ways to render conditionally in React?
What is a React Fragment and when should you use it?
What is the key prop in React and why does it matter?
What is the difference between expressions and statements in JSX?
How does event handling in JSX differ from plain HTML?
How is the spread operator used with JSX props?
When rendering in JSX, which values does React skip and which ones show up on screen?
Why can a React component only return a single root element?
What is props.children and when do you use it?
An older codebase uses `React.PureComponent` — what replaces it in a function component, and is the swap exact?
What is a Controlled Component in React? How does it differ from an Uncontrolled Component?
What is component composition and why is it preferred over inheritance?
What is forwardRef in React and when do you need it?
How do stateless and stateful components differ?
What is the Compound Components pattern?
What is the difference between mount, update, and unmount in a component's lifecycle?
What can a React component return besides JSX?
Where do props and state differ?
What is lifting state up and when do you need it?
What is immutability in React state and why does it matter?
How do you update nested state correctly?
What is derived state and what are the common pitfalls?
What is state batching in React? What changed in React 18?
What does unidirectional data flow mean in React?
When are state updates synchronous vs asynchronous?
Why should you avoid initializing state directly from props?
What is the function-component equivalent of `componentDidMount`, and where does the equivalence break down?
How does componentDidUpdate work and when should you use it?
What is the hook equivalent of `componentWillUnmount`, and what leaks when you forget it?
How does shouldComponentUpdate work and when should you use it?
How are componentDidCatch and Error Boundaries related?
What is the order of lifecycle methods during mount, update, and unmount?
How does Strict Mode affect lifecycle methods?
How does the useState hook work?
What does the useEffect dependency array decide?
What is the cleanup function in useEffect and when do you need it?
Why can you not pass an `async` function directly to useEffect, and what is the correct way to write it?
How do you avoid infinite loops in useEffect?
What is a stale closure in useEffect and how do you avoid it?
What is lazy initialization of useState and when should you use it?
On React 18, useEffect runs twice in development — why, and should you block it?
What is useInsertionEffect and when should it be used?
If two components use the same custom hook, do they share its state?
What problem arises when using object values as useEffect dependencies?
What is the correct way to fetch data and handle race conditions in useEffect?
What is the useContext hook and how do you use it?
What is the useMemo hook for and when should you use it?
What is the useCallback hook for? How does it differ from useMemo?
What are the main uses of the useRef hook?
What is the useTransition hook used for?
What is the useDeferredValue hook?
What is useImperativeHandle used for?
What is the useSyncExternalStore hook?
What are the Rules of Hooks, and why can a hook not be called inside an `if`?
What is the useOptimistic hook in React 19?
What is the useActionState hook in React 19?
How do you optimize useContext to prevent unnecessary re-renders?
What is the difference between useMemo and React.memo?
What is a custom hook and how do you create one?
When should you extract logic into a custom hook vs a utility function?
How do you implement a useDebounce custom hook?
How do you test custom hooks?
What does the usePrevious hook do and how do you implement it?
What is custom hook composition?
What patterns are commonly used when building custom hooks?
What is the Context API in React and what problem does it solve?
When should you use Context instead of prop drilling?
What is the useParams hook in React Router used for?
How do you use the useNavigate hook in React Router v6?
How do nested routes work in React Router v6?
How do you implement protected routes in React Router?
How do you organize multiple contexts in an app?
What is context re-render optimization?
How are query strings (SearchParams) handled in React Router?
What are loader functions for data loading in React Router v6.4+?
What is an uncontrolled component and how does useRef fit into forms?
What is Formik and why would you use it?
How does React Hook Form differ from Formik?
How is form validation done in React?
What is an Error Boundary and how do you create one?
What errors does an Error Boundary NOT catch?
How do you implement dynamic form fields (add/remove inputs)?
What is Optimistic UI in form submission?
How do you integrate Zod with React Hook Form?
When should you use server-side vs client-side form validation?
What is React.memo and how does it work?
What are React.lazy and Suspense used for?
What is React Fiber?
What is the render props pattern?
How does React's reconciliation algorithm work?
What is windowing/virtualization in React?
Why should you avoid defining components inside other components (inline components)?
How does Suspense for data fetching work?
How can the key prop be used to reset component state?
How do React Server Components differ from Client Components?
Why does calling `setCount(count + 1)` three times in the same event only increment by 1? When must you use the functional updater?
Why must React component tests be wrapped in `act()`? When does RTL wrap automatically, and when should you use `waitFor`/`findBy`?
What does the React Profiler API measure? Explain `actualDuration`, `baseDuration`, `commitTime`, and how to detect slow components.
React uses event delegation with synthetic events. Why did React 17 change the listener attachment from `document` to the root container?
React Portals render a component into a different DOM location, yet events still bubble through the React tree. Explain how this works.
How are useMemo and useCallback different? Give a real-world example.
When does the useEffect cleanup function run? Why is it important?
What are custom hooks? Write a simple useFetch custom hook.
When should you use React.memo? When should you NOT use it?
Why shouldn't you create new objects or arrays inline in JSX props?
How do Error Boundaries work? What are their limitations?
How is a React project folder structure typically organized?
Explain React Server Components vs Client Components.
A component is re-rendering continuously. How do you debug and fix it?
A request fires twice — how do you tell whether it is Strict Mode or the effect genuinely re-running?
State was updated but the UI didn't re-render. What are the causes?
Memory leak in a React component. How do you detect and fix it?
A page is loading slowly. What is your debugging approach?
You have a complex form with 20+ fields. How do you organize state efficiently?
An old project uses Class Components. What is your strategy for migrating to Hooks?
Design an authentication flow for a React SPA.
What is i18n (internationalization)? How do you implement multi-language support in a React project?
You get a CORS error when calling an API. How do you handle it?
SSR/SSG content differs from the client side — what causes a hydration mismatch?
How do you optimize a React app displaying 10,000+ items in a list?
When should you use useCallback vs useMemo in React? Give a concrete real-project example.
Explain the 'missing dependency' warning in useEffect. Why add a dependency array? When is it not needed?
How do you handle race conditions in async useEffect?
**Example:** user types in a search box then clears it, and the old request resolves after the new one.
What is the difference between controlled and uncontrolled components in React forms? Which should you use?
What is prop drilling? How do you solve it in a large project?
Why does list rendering need a key prop? What is wrong with using the index as a key?
Lazy loading and code splitting in React. When is it needed? How do you implement it?
How do you optimize an infinite scroll list? Explain the virtual scrolling concept.
Explain React.memo(). When should you use it?
The Custom Hook pattern. Write a custom hook to manage form state. How do you test it?
Error boundaries in React. How do you implement them, and what are the use cases?
The compound component pattern. Why is it useful? Show an implementation example.
Render prop vs HOC pattern. What does modern React use instead?
What is Suspense in React? Explain fallback, error boundary integration, and data fetching.
Compare Redux Toolkit, Zustand, Jotai and Context API — when should you reach for each?
How do you write accessible (a11y) React components? What roles do semantic HTML, ARIA, focus management and useId play?
How do you type component props in TypeScript using generics and discriminated unions? When is each needed?
How do you type event handlers and refs in React with TypeScript? Where do the correct event and element types come from?
What principles should guide testing components with React Testing Library? Query priority, the role of user-event, and why avoid testing implementation details?
What do Error Boundaries and the react-error-boundary library solve? Why can't a hook (try/catch in a component) catch a render error?
How do useTransition and useDeferredValue differ? When do you use each to keep the UI responsive under heavy updates?
What is the React Compiler (React 19) and what does it auto-memoize? Do you still need useMemo/useCallback/React.memo?
What is a Custom Hook and why should we use it?
The `react-hooks/exhaustive-deps` lint warns about a missing dependency. Is it fine to silence it with `// eslint-disable-next-line`?
When should a value live in `useRef` instead of `useState`? Give a concrete example.
What is `useId` for, and why not generate ids with `Math.random()` or a global counter?
Does calling `setState` after unmount leak memory? Do you still need an `isMounted` flag in effects?
A counter using `setInterval` inside `useEffect` with `[]` deps gets stuck at 1. Why, and what are the fixes?
A child receives `onMessage` from its parent and calls it inside a `useEffect` that opens a WebSocket. Adding `onMessage` to the deps reconnects constantly; leaving it out trips the lint. What is the fix?
When does logic belong in an event handler rather than a `useEffect`? Give mistakes commonly seen in real projects.
A screen keeps `loading`, `error`, and `data` in three separate `useState` calls and sometimes lands in impossible states (loading and error at once). How do you fix it?
A team uses a hand-written `useFetch` custom hook. Why do many projects move to React Query/SWR? What is hard to get right by hand?
A tooltip measures its height and flips upward, but flickers for one frame. `useLayoutEffect` fixes it, yet SSR now warns. Explain and resolve.
An Effect runs twice in dev and calls the API twice. A teammate blocks it with a `useRef` `didRun` flag. What is your assessment?
React 19 lets a component receive `ref` as a regular prop. What happens to `forwardRef` and `useImperativeHandle`?
What goes wrong when reading `localStorage` or `matchMedia` with `useState` + `useEffect`? How does `useSyncExternalStore` fix it?
When Effect dependencies change in both a parent and a child, in what order do cleanups and setups run? Why does the order matter?
After `setState` appends a row, you read `scrollHeight` to scroll to the bottom but get the old value. What does `flushSync` solve, and why use it sparingly?
Why can hooks not be called inside `if` or loops? What exactly breaks inside React?
In which cases does a React component re-render?
Does a re-render always mean the DOM is updated? Explain the render phase vs the commit phase.
What is wrong with using the array index as `key`? When is it still acceptable?
Does passing an inline arrow function like `onClick={() => save(id)}` slow the app down?
You wrapped a component in `React.memo` but it still re-renders every time. What do you check?
Explain the technique of passing the heavy part as `children` to avoid re-renders without `memo`.
Why does `memo` not prevent re-renders caused by context? How do you split contexts in a large app?
How does automatic batching work in React 18? When is `flushSync` required and what does it cost?
If you set state to exactly its current value, does React re-render?
Derived values (filters, totals, sorted lists): compute during render, store in state, or wrap in `useMemo`?
What does concurrent rendering in React 18 mean? When we say "rendering can be interrupted", what exactly gets interrupted?
With `React.lazy` + `Suspense` for code splitting, the fallback flashes for an instant on every tab switch. Why, and how do you fix it?
React 19 lets you render `<title>`, `<meta>`, `<link>` right inside a component. How does that work, and does it replace `react-helmet`?
What is `useFormStatus` for, and why must the submit button be a child component of the `<form>` to read the status?
A search box filtering a 5,000-row table stutters while typing. Do you reach for `useTransition` or `useDeferredValue`? What is the difference?
How is `useDeferredValue` different from debouncing? If we already have a hand-rolled `useDebounce`, do we still need it?
How does React 19 `use()` differ from other hooks? Why may it be called inside an `if` when `useState` may not?
A detail page uses Suspense but still loads slowly because requests run back to back. Where does the waterfall come from and how do you fix it?
A Like button must change instantly on click while the request is still in flight. How do you use `useOptimistic`, and what happens to the state when the request fails?
How do Suspense and Error Boundaries work together? If a fetch inside Suspense fails, who catches it, and how do you let the user retry?
The console reports "Hydration failed / text content does not match". What are the common causes and the fix for each?
What is selective hydration in React 18? What happens if the user clicks a region that has not hydrated yet?
How does streaming SSR differ from `renderToString`? Explain `renderToPipeableStream` and the difference between `onShellReady` and `onAllReady`.
If React Compiler memoises automatically, do we still need `useMemo`, `useCallback`, and `React.memo`? What does it change about how we write code?
React 19 lets a callback ref return a cleanup function. How was cleanup done before, and what breaking change does this introduce?
What are Actions in React 19? How does building a form submit with `useActionState` differ from managing `loading`/`error` yourself with `useState`?
How does fetching data in a Server Component differ from `useEffect` + `fetch` on the client?
One slow 3-second query blanks the whole page. How do you stream it with Suspense?
After a successful mutation, when do you use `invalidateQueries` versus `setQueryData`?
The backend reports a request spike after adopting React Query: every browser tab switch refires the API. How do you diagnose and configure it?
In React Query optimistic updates, why call `cancelQueries` before writing to the cache, and how do you roll back correctly?
With `useInfiniteQuery`, how do you update one edited item without refetching every page already loaded?
How do you gate routes by role/permission on the frontend?
In an infinite-scroll list, how do you keep the scroll position and loaded pages when the user goes back from a detail page?
How do you structure state and validation for a multi-step form with draft saving?
How do you handle state and validation for a dynamic form with add/remove rows (e.g. order line items)?
How do you design state and the request flow for a large data table with server-side filter, sort and pagination?
For a search autocomplete, how do you stop stale results from overwriting fresh ones, and make it keyboard-usable?
How do you implement optimistic UI for a Like / Add-to-cart button when the user clicks rapidly?
What states does a data-fetching screen need, and how do you present loading / empty / error?
How do you switch between VI/EN instantly without a page reload?
