cf.completefrontend
REACT INTERVIEWS

React interview questions

147 questions about React, the way interviewers ask them: 75 to explain, 40 where you predict what a component logs and shows, and 32 where you write a component or a hook. 35 easy, 84 medium, and 28 hard. Every answer is checked by running the code with React 19.3.1 and React Testing Library.

Every question is free to read. Sign in with Google to see the answers: the short version to say in the interview, why it's true, and what they'll ask next.

147 of 147 questions

Rendering & JSX

  1. What is the difference between a component and an element?ConceptEasy
  2. What does JSX compile to, and why must a component return a single root?ConceptEasy
  3. Why do lists need keys, and why is the array index a poor key when items move?ConceptEasy
  4. What does React render for null, false, undefined, 0, and "", and is returning null the same as not rendering a component?ConceptMedium
  5. What is the difference between rendering and committing? When does React touch the DOM?ConceptMedium
  6. Why should components be pure, and what does Strict Mode's double render catch?ConceptMedium
  7. What does this cart show when it has no items?Predict the outputEasy
  8. You type a note for Tea and remove Tea. With index keys, what does the list show?Predict the outputMedium
  9. Two counters switch style: which one keeps its count?Predict the outputHard
  10. With Strict Mode on, what does this component log on mount and after one click?Predict the outputHard
  11. Render a product list with keys, a Sold out badge, and an empty messageWrite the codeEasy
  12. Write a recursive CategoryTree that renders nested categoriesWrite the codeMedium
  13. Write a Highlight component that wraps matches of a query in <mark>Write the codeMedium

Components & props

  1. What is the difference between props and state, and why are props read-only?ConceptEasy
  2. What is the children prop, and how do you pass JSX into a component?ConceptEasy
  3. What is the difference between controlled and uncontrolled inputs, and when do you use each?ConceptMedium
  4. When do you lift state up, and how does composition help you avoid prop drilling?ConceptMedium
  5. What is the difference between a higher-order component, a render prop, and a custom hook?ConceptMedium
  6. Why does defining a component inside another component reset its state on every render?ConceptHard
  7. What does this page show when a prop with a default is undefined, null, or missing?Predict the outputEasy
  8. You type Hi into a note box that's defined inside its parent. What does it log and show?Predict the outputMedium
  9. Which value wins when you spread props and also pass the same prop?Predict the outputMedium
  10. Build a controlled input with a character countWrite the codeEasy
  11. Build an accessible Toggle button that works controlled or uncontrolledWrite the codeMedium
  12. Build compound Tabs components that share state through contextWrite the codeMedium

State & events

  1. What does this counter log and show when you click Add once?Predict the outputMedium
  2. What is an updater function, like setCount((c) => c + 1), and when do you need one instead of a value?ConceptEasy
  3. Why must you not mutate state objects and arrays, and how do you update nested state?ConceptEasy
  4. What is batching in React, and did it change in React 18?ConceptMedium
  5. When does setting state re-render a component, and when does React skip it?ConceptMedium
  6. How do you decide what goes in state, and how do you avoid redundant or duplicated state?ConceptMedium
  7. What does "state as a snapshot" mean, and how does it explain stale values in async code?ConceptHard
  8. What does this profile log and show after you click Rename, then Like?Predict the outputEasy
  9. What does this counter log when you click Add three times, quickly?Predict the outputMedium
  10. What does this product card log when you click Add to cart, then Wishlist?Predict the outputMedium
  11. How many times does this component render when you click Set to 1 three times?Predict the outputHard
  12. Build a counter with a step and a reset, using updater functionsWrite the codeEasy
  13. Build a shopping list where you can add, tick off, and remove items without mutating stateWrite the codeMedium

Effects

  1. What are Effects for, and what shouldn't go in an Effect?ConceptEasy
  2. How does the useEffect dependency array work: no array, [], and [a, b]?ConceptEasy
  3. Why does React run Effects twice in development Strict Mode, and how do you write Effects that survive it?ConceptMedium
  4. How do you avoid race conditions when you fetch data in an Effect?ConceptMedium
  5. useEffect vs useLayoutEffect: when does each run, and when do you need the layout one?ConceptMedium
  6. What is useEffectEvent for, and why can't you call an Effect Event during render?ConceptHard
  7. What does this Effect log when the component mounts in Strict Mode?Predict the outputMedium
  8. What does this chat room log when you switch rooms?Predict the outputEasy
  9. How many times does this Effect run after two clicks, when its dependency is an object?Predict the outputMedium
  10. In what order do a parent's and a child's Effects run on mount, and clean up on unmount?Predict the outputMedium
  11. What does this component log when its layout effect sets state?Predict the outputHard
  12. Write a useDocumentTitle hook that puts the old title back on unmountWrite the codeMedium
  13. Write a useWindowEvent hook that always calls the latest handler without re-subscribingWrite the codeMedium

Hooks & custom hooks

  1. What are the Rules of Hooks, and why does React need them?ConceptEasy
  2. What makes a function a custom hook, and do components that call it share its state?ConceptEasy
  3. What do useMemo, useCallback, and memo each cache, and when do they help?ConceptMedium
  4. When do you use useRef instead of useState, and why doesn't changing a ref re-render?ConceptMedium
  5. When is useReducer a better choice than useState?ConceptMedium
  6. How does React know which useState call belongs to which piece of state?ConceptHard
  7. What does this ref counter log and show after three clicks?Predict the outputEasy
  8. Two components call the same custom hook: what do they show after these clicks?Predict the outputMedium
  9. This useMemo leaves out a dependency: what does it log and show?Predict the outputMedium
  10. Write a usePrevious hookWrite the codeMedium
  11. Write a useToggle hook with a stable toggle functionWrite the codeEasy
  12. Write a useDebouncedValue hookWrite the codeMedium
  13. Write a useLocalStorageState hook that saves state as JSONWrite the codeHard

Refs & the DOM

  1. What are refs for, and when should you not use them?ConceptEasy
  2. How do you focus an input or scroll to an element right after a state change?ConceptMedium
  3. In React 19, ref is a prop. What changed from forwardRef, and what are ref cleanup functions?ConceptMedium
  4. What does useImperativeHandle do, and when is it justified?ConceptMedium
  5. Callback refs vs object refs: when does React call a callback ref, and with what?ConceptHard
  6. Two callback refs log every call. What does this log when you hide the note and show it again?Predict the outputMedium
  7. This component reads a ref while it renders. What does the page show after one click?Predict the outputMedium
  8. Three callback refs, two with cleanups. What does this log when you click Clicked 0, then Toggle?Predict the outputHard
  9. Build a SearchBox whose Search button puts the cursor in the fieldWrite the codeEasy
  10. Build an AutoGrowList that scrolls each new item into viewWrite the codeMedium
  11. Build a Modal that gives the focus back to whatever opened itWrite the codeMedium

Context & state management

  1. What problem does context solve, and what are its downsides?ConceptEasy
  2. Why do all context consumers re-render when the provider's value changes, and how do you avoid unnecessary renders?ConceptMedium
  3. When would you reach for an external store like Zustand or Redux instead of context, and where does useSyncExternalStore fit?ConceptMedium
  4. How do you structure state and dispatch with a reducer and context in a medium-sized app?ConceptMedium
  5. What is tearing, and how does useSyncExternalStore prevent it?ConceptHard
  6. What does this page show when some readers have no provider above them?Predict the outputEasy
  7. The provider's value is a new object on every render. Does a memoized reader render again?Predict the outputMedium
  8. With nested providers, which theme does each component read?Predict the outputMedium
  9. Which components render again when the theme provider's state changes?Predict the outputHard
  10. Write a ThemeProvider and a useTheme hook that throws a helpful error outside the providerWrite the codeMedium
  11. Write a cart reducer with add, remove, and set quantity, and a CartProvider to share itWrite the codeMedium
  12. Write a tiny store, createStore(initial), and a useStore(store, selector) hook on useSyncExternalStoreWrite the codeHard

Performance

  1. What causes a React component to re-render?ConceptEasy
  2. When does memo help, and why do inline objects and functions break it?ConceptMedium
  3. How do you find which component makes a React page slow?ConceptMedium
  4. What is list virtualization, and when do you need it?ConceptMedium
  5. What does the React Compiler do, and does it replace useMemo and useCallback?ConceptMedium
  6. How do moving state down and passing content as children avoid re-renders without memo?ConceptHard
  7. Two memo badges, one with an inline style object: what logs when the parent updates twice?Predict the outputEasy
  8. A useCallback with [] dependencies reads state: what does it log after three adds?Predict the outputMedium
  9. A stateful panel renders children and a render prop: which components render when it toggles?Predict the outputHard
  10. Stop a task list from re-rendering unchanged rows when you filter or tick a taskWrite the codeMedium
  11. Rank a leaderboard only when the players or the sort order changeWrite the codeEasy
  12. Write a useDeferredSearch hook that keeps old results, marked stale, while new ones renderWrite the codeHard

Suspense, transitions & actions

  1. What is Suspense, and what can make a component suspend?ConceptEasy
  2. useTransition vs useDeferredValue: what does each do, and when do you use which?ConceptMedium
  3. What are Actions in React 19, and what do <form action>, useActionState, and useFormStatus do?ConceptMedium
  4. What does useOptimistic do, and what happens to the screen when the action fails?ConceptMedium
  5. What is the use API, and why must the promise you pass it be cached?ConceptMedium
  6. How do error boundaries work, what don't they catch, and how do you reset one?ConceptHard
  7. What does this Suspense example log and show after you show, hide, and show the notes again?Predict the outputMedium
  8. One tea in this menu has no price. What does the page log and show?Predict the outputMedium
  9. You switch tabs in a transition, and the new tab suspends. What's on screen right after the click, and what does it log?Predict the outputHard
  10. Both components call useFormStatus. Which one sees the form as pending when you press Save?Predict the outputMedium
  11. Write an ErrorBoundary class with a fallback and a Try again buttonWrite the codeEasy
  12. Write a form with useActionState that shows a pending button and the action's errorWrite the codeMedium
  13. Write a list with useOptimistic that adds items at once and rolls back when saving failsWrite the codeHard

Server rendering & Server Components

  1. What's the difference between client-side rendering, server-side rendering, and static generation?ConceptEasy
  2. What is hydration, and what causes hydration mismatch errors?ConceptMedium
  3. What are React Server Components, and how are they different from server-side rendering?ConceptMedium
  4. What can a Server Component pass as props to a Client Component, and why?ConceptHard
  5. What are Server Functions ('use server'), and what security rules apply to them?ConceptMedium
  6. How does streaming server rendering with Suspense work?ConceptHard
  7. Why does React recommend a framework for new apps, and when is a Vite single-page app fine?ConceptEasy
  8. What's new in React 19 for <title>, <meta>, and stylesheets with precedence?ConceptMedium
  9. What does this component log on the server with renderToString, and what HTML comes back?ConceptMedium
  10. What do these fields show after a re-render, with ids from useId and from a counter?Predict the outputMedium
  11. Write a useHydrated hookWrite the codeMedium

How React works inside

  1. What is reconciliation, and what assumptions let React do it in linear time?ConceptMedium
  2. What is a fiber, and why did React move to the Fiber architecture?ConceptMedium
  3. Inside React, what do the work loop and the commit phase actually do?ConceptMedium
  4. What are lanes, and how does React decide which updates to render first?ConceptHard
  5. How does React's event system work? Where are the listeners, and what is a synthetic event?ConceptMedium
  6. What does concurrent rendering mean if JavaScript has only one thread?ConceptHard
  7. What does React do inside when a component's key changes, and why does that reset its state?ConceptMedium
  8. Only Counter B's wrapper changes. What does the page log and show after you switch the layout?Predict the outputEasy
  9. Two lists, one keyed by name and one by index, are reversed. Which rows keep their state, and which <li> elements does React move?Predict the outputMedium
  10. An async click handler sets state before and after an await. What does it log and show?Predict the outputHard
  11. Write a minimal createElement(type, config, ...children)Write the codeMedium
  12. Write a tiny renderElement(element, container) that turns elements into DOMWrite the codeMedium

Patterns, testing & TypeScript

  1. How do you test a React component the way users use it?ConceptEasy
  2. How do you test a component that fetches data?ConceptMedium
  3. How do you type props, children, events, and refs in React with TypeScript?ConceptMedium
  4. How do you structure a React project as it grows?ConceptEasy
  5. How do you make a custom dropdown accessible?ConceptMedium
  6. Portals: why use them for modals, and how do events bubble through them?ConceptMedium
  7. How would you design a reusable form library API in React?ConceptHard
  8. getByText or getByRole: which element does each query find?Predict the outputMedium
  9. A click inside a portal: which handlers run, and in what order?Predict the outputMedium
  10. Build an accessible Accordion with aria-expanded and aria-controlsWrite the codeEasy
  11. Build a Toast that renders into document.body and dismisses itselfWrite the codeHard
  12. Write a useAsync(fn) hook that returns { status, data, error, run } and ignores stale resultsWrite the codeHard