React Interview Questions and Answers
A complete list of 670+ React interview questions and answers, organized by topic. Click any question to jump straight to its detailed answer with code examples.
8 topics 670 questions
React Hooks
useState
- What does useState return?
- Why does state appear to be "one render behind"?
- When should you use a functional state update?
- What is lazy initial state?
- How do you update an object in state?
- What is state batching?
- Should you store computed/derived values in state?
- What does "lifting state up" mean?
- When should you use useRef instead of useState?
- How do you reset a component's state to its initial values?
- How do you store a function in state?
- How do you add and remove items in array state?
- How do you update one object inside an array in state?
- When should you choose useReducer over useState?
- How do you build a controlled input with useState?
- What is the difference between controlled and uncontrolled components?
- Should you use multiple state variables or one state object?
- How do you update deeply nested state immutably?
- What is redundant state and why avoid it?
- How do you toggle a boolean in state?
- How do you read the latest state inside an async callback?
- Does setting state to the same value cause a re-render?
- What is the difference between state and props?
- Why must useState be called at the top level, not in conditions?
- When does updating state not trigger a re-render?
- Can you call a state setter during render?
- What causes an infinite re-render loop with useState?
- Why doesn't state update when the prop used to initialize it changes?
- How do you cache an expensive derived value without storing it in state?
- Where should state live in a React component tree?
- How do you manage many form fields with one state object?
- Is there a setState callback like in class components?
- How do you handle number inputs with useState?
- What does calling the same setter three times with the value form produce?
useEffect
- What does useEffect do?
- What does the dependency array control?
- What is the cleanup function and when does it run?
- What happens with an empty dependency array?
- What is a stale closure in useEffect?
- How does useEffect differ from useLayoutEffect?
- How do you fetch data inside useEffect?
- How do you avoid race conditions when fetching in an effect?
- Why prefer a data library over fetching in useEffect?
- Why does an object or array dependency re-run the effect every render?
- How does useCallback help with effect dependencies?
- How do you stabilize an object dependency with useMemo?
- How do you poll an API on an interval with useEffect?
- How do you debounce a value with useEffect?
- How do you subscribe to an external store from an effect?
- How do you sync state to localStorage with useEffect?
- When do you NOT need a useEffect?
- Why shouldn't you use an effect to compute derived state?
- Why is disabling the exhaustive-deps lint dangerous?
- In what order do cleanup and the next effect run?
- Why does my effect run twice in development?
- What causes an infinite loop in useEffect?
- Why can't the useEffect callback be async?
- How do you add and remove a global event listener?
- Should you split logic into multiple effects?
- When exactly does useEffect run relative to rendering?
- How do you read the latest prop/state in a long-lived effect without re-subscribing?
- How do you run an effect only once when the component mounts?
- Why are primitive dependencies safer than object dependencies?
- Do effects run during server-side rendering?
- How do you reset state when a prop changes, without an effect?
- How does the ignore-flag pattern prevent setting state after unmount?
- Why are chains of effects that trigger each other an anti-pattern?
- Why must side effects live in useEffect and not in the render body?
- How do you run code after a specific value changes?
useContext
- What does useContext do?
- How do you create and provide a context?
- When is the createContext default value used?
- What triggers a context consumer to re-render?
- When should you use context instead of props?
- How do you update context from a consumer?
- Can a component read from multiple contexts?
- How do you avoid unnecessary re-renders caused by a large context?
- Does React.memo protect a component from context re-renders?
- When should you use context vs. a state management library?
- How does useContext compare to the Context.Consumer component?
- What is the context + provider custom hook pattern?
- How do you test components that consume context?
- Can context cause stale data bugs similar to useEffect closures?
- Can you stop context from propagating to part of the tree?
- How do you lazily initialize context state?
useReducer
- What does useReducer return?
- What is the shape of a reducer function?
- When should you prefer useReducer over useState?
- What is the third argument (initializer) of useReducer?
- What are action type constants and why use them?
- How do you share the dispatch function across components?
- How do you implement a "reset to initial" action in a reducer?
- How do you test a reducer function?
- Can you use multiple useReducers in one component?
- How do you pass data with a dispatch action?
- How does Immer simplify reducer logic?
- How does useReducer compare to Redux?
- What happens if you mutate state inside a reducer?
- Are multiple dispatches in one event handler batched?
- Why must a reducer have no side effects?
- When would you use the initializer function for performance?
useCallback & useMemo
- What does useCallback do?
- What does useMemo do?
- What is the difference between useCallback and useMemo?
- What is referential equality and why does it matter for memoization?
- How do useCallback and React.memo work together?
- When should you actually use useMemo or useCallback?
- Why is premature memoization harmful?
- What happens if you omit a dependency from useMemo or useCallback?
- How does useCallback help stabilize effect dependencies?
- How do you stabilize an object prop with useMemo?
- How do you memoize an expensive derived list?
- What is the overhead of useCallback and useMemo?
- Is it always wrong to pass an inline function to a child component?
- Should you use useMemo or store the derived value in state?
- When should you remove a useMemo or useCallback?
useRef
- What does useRef return?
- What is the difference between useRef and useState?
- How do you access a DOM element with useRef?
- What is a callback ref and when do you need one?
- What is forwardRef and when do you use it?
- What is useImperativeHandle?
- How do you store a timer ID in a ref?
- How do you track the previous value of a prop or state with useRef?
- How do you read a "live" version of a prop or state inside a long-lived callback?
- How does a ref differ from a module-level variable?
- What is ref.current before the element mounts or after it unmounts?
- What is the downside of using a ref instead of state?
- Why do refs get reset when a component's key changes?
- Why can't you attach a ref directly to a function component?
- When should you use a ref instead of querying the DOM with getElementById?
Custom Hooks
- What is a custom hook?
- Why must custom hooks start with "use"?
- What is the difference between a custom hook and a utility function?
- How do custom hooks compare to HOCs and render props for sharing logic?
- How do you build a usePrevious hook?
- How do you build a useDebounce hook?
- How do you build a useLocalStorage hook?
- How do you build a basic useFetch hook?
- How do you build a useMediaQuery hook?
- Can custom hooks call other custom hooks?
- When should you extract logic into a custom hook?
- How do you test a custom hook?
- What can a custom hook return?
- How do stale closure bugs appear in custom hooks?
React Components
JSX and Rendering
- What is JSX and what does React do with it?
- Why must JSX always return a single root element?
- What are React Fragments and when should you use them?
- How do you embed JavaScript expressions in JSX?
- What are the key differences between JSX and HTML?
- How does JSX handle boolean attributes?
- Why must custom component names start with an uppercase letter in JSX?
- How do you apply inline styles in JSX?
- How do you write comments in JSX?
- How do you spread an object's properties onto a JSX element?
- What happens when a component returns null?
- How do you render an array of elements in JSX?
- What is the difference between single {} and double {{}} in JSX?
- When must a JSX tag be self-closing?
- How is the children prop passed and accessed in JSX?
- Can you use an if statement directly inside JSX? What should you do instead?
Props and Component Types
- What are props in React?
- Are props mutable inside a component? Why not?
- What is the children prop?
- What is the difference between a function component and a class component?
- Is there any reason to use a class component in modern React?
- How do you provide default values for props?
- What is PropTypes and when would you use it?
- What is the difference between props and state?
- What is prop drilling and what are the alternatives?
- How do you destructure props and why is it preferred?
- How do you pass an event handler as a prop?
- What is the spread-props pattern and when should you use it?
- What is a pure component in React?
- Why does React prefer composition over inheritance?
- What is a controlled component?
- What is the render-props pattern?
Event Handling
- How do you attach an event handler to an element in React?
- What is a SyntheticEvent in React?
- Why do React event names use camelCase?
- How do you prevent default browser behavior in React?
- Why can't you return false to prevent default behavior in React?
- What is the difference between stopPropagation and preventDefault?
- How do you pass arguments to an event handler?
- How does event delegation work in React?
- How do you handle a form submission in React?
- What is a controlled input and why does React prefer it?
- What is the difference between onChange and onInput in React?
- How do you handle keyboard events in React?
- How does 'this' binding work in class component event handlers?
- How do you throttle or debounce an event handler in React?
- How do you access the native DOM event from a React SyntheticEvent?
- What is the most efficient way to handle events in a list of items?
- What happened to SyntheticEvent pooling and what changed in React 17?
Conditional Rendering
- What are the main ways to conditionally render content in React?
- How does the && operator work for conditional rendering?
- What is the "falsy zero" bug with the && operator?
- How do you use a ternary for conditional rendering?
- When should you use if/else, ternary, or && for conditional rendering?
- How do you render nothing from a component?
- What is the difference between CSS display:none and conditional rendering?
- How do you conditionally apply a CSS class in JSX?
- How do you render different content based on user role or permission?
- Can you use a switch statement for conditional rendering?
- How do you avoid deeply nested ternaries in JSX?
- What is the pattern for handling loading and error states in rendering?
- What is short-circuit evaluation and how does it apply to conditional rendering?
- What is the nullish coalescing operator and when is it useful in JSX?
- How do React.lazy and Suspense relate to conditional rendering?
Lists and Keys
- How do you render a list of items in React?
- What is the key prop and why is it required for lists?
- What problems arise when you use the array index as a key?
- What makes a good key?
- Where does the key prop need to be placed?
- Does the key prop need to be globally unique?
- What is reconciliation and how do keys affect it?
- What happens if two siblings have the same key?
- Can a component read its own key prop?
- How do you handle keys when your data has no unique IDs?
- What is the actual cost of not providing a key?
- How do you render a list of different component types based on data?
- What happens when list items reorder and you used index keys?
- When is it acceptable to use index as a key?
- How do nested lists affect key requirements?
- What is the difference between key and ref in React?
- What is the role of React.Fragment in lists?
- How does React's virtual DOM use keys for diffing list elements?
React State and Data Flow
Lifting State Up
- What does "lifting state up" mean in React?
- Why is lifting state up necessary instead of each component keeping its own copy?
- How does a child component communicate a change back to its parent?
- Two sibling components need to share data. Where should the state live?
- What goes wrong if you lift state higher than necessary?
- When should you lift state vs. reach for Context or a global store?
- What is the relationship between lifting state and controlled components?
- What is derived state, and how does it relate to lifting?
- How can you prevent child re-renders caused by callback props passed from a parent?
- When multiple pieces of related state need to be lifted, should they be separate useState calls or one object?
- How do you initialise lifted state from a prop only once without re-syncing on every render?
- What naming convention is commonly used for event-handler props when lifting state?
- What is "unidirectional data flow" and why does React enforce it?
- Why is copying parent state into child state considered an anti-pattern?
- How does lifting state enable a parent to collect and submit form field values?
- How do you handle lifted state for a dynamic list where each item has its own editable fields?
Context API
- What problem does the React Context API solve?
- What does createContext do and what does its argument represent?
- How do you consume a context value inside a function component?
- When does a context change cause re-renders, and which components are affected?
- Why should you memoize the value passed to a Context Provider?
- Can a component use multiple contexts, and how do you compose multiple Providers?
- When should you use Context instead of props?
- What are the main differences between Context and a library like Redux?
- Why is it a good practice to wrap useContext in a custom hook?
- How can you split a context to avoid unnecessary re-renders when only part of the value changes?
- How do you combine useReducer with Context to implement a lightweight global store?
- How do you avoid expensive context value recomputation on every render?
- Should the default value of createContext be null or a sensible fallback, and why?
- Where in the component tree should a Context Provider be placed?
- How do you test a component that depends on a Context value?
Controlled vs Uncontrolled Components
- What is a controlled component in React?
- What is an uncontrolled component in React?
- What is the key difference between the `value` and `defaultValue` props on an input?
- When should you prefer a controlled component over an uncontrolled one?
- When is an uncontrolled component a better choice?
- What warning does React show if you set `value` without an `onChange` handler?
- What happens if you pass `null` or `undefined` as the `value` prop?
- How do controlled and uncontrolled patterns apply to textarea and select elements?
- Can you read an uncontrolled input's value without a ref?
- Can a single form have both controlled and uncontrolled inputs?
- How does React Hook Form differ from the traditional controlled component pattern?
- How do you programmatically reset a controlled form to its initial values?
- How do you manage a dynamic list of controlled input fields?
- How would you summarise the controlled vs. uncontrolled tradeoff in one sentence?
Prop Drilling and Composition
- What is prop drilling in React?
- What are the main problems caused by prop drilling?
- How can component composition solve prop drilling without using Context?
- What is the `children` prop and how does it enable composition?
- What is the "slot" pattern in React and how does it differ from just using children?
- When does composition not solve prop drilling and Context becomes necessary?
- What are render props and how do they help with composition?
- How do Higher-Order Components (HOCs) relate to prop drilling?
- Is it always wrong to pass a prop through an intermediate component?
- How can co-locating state close to where it's used reduce prop drilling?
- How does a library like Zustand solve prop drilling compared to Context?
- What are the four main solutions to prop drilling, ordered by complexity?
- What TypeScript pattern helps make prop-forwarding components less painful?
- How does the compound component pattern reduce prop drilling inside a component family?
React Rendering and Performance
Virtual DOM and Reconciliation
- What is the virtual DOM and why does React use it?
- What is reconciliation?
- What is React Fiber and how does it improve on the old stack reconciler?
- Why do lists need keys, and what happens when keys are missing or wrong?
- What causes a React component to re-render?
- What is the difference between the render phase and the commit phase?
- What is the difference between the React reconciler and a renderer?
- When does React bail out of re-rendering a subtree?
- What is hydration and why can mismatches cause problems?
- Why does React 18 render components twice in Strict Mode?
- What is the difference between a React element, a component, and a fiber?
- What is concurrent rendering and what problem does it solve?
- Why must React component render functions be pure?
- What is the difference between useEffect and useLayoutEffect in terms of when they run in the commit phase?
- How do you identify performance bottlenecks in a React application?
React.memo
- What does React.memo do?
- What is shallow equality and why does it matter for React.memo?
- When is React.memo actually worth using?
- How do you use a custom comparator with React.memo?
- Why do inline function props break React.memo, and how do you fix it?
- What is the difference between React.memo and PureComponent?
- Does React.memo prevent re-renders caused by context changes?
- Why does passing children as a prop often break React.memo?
- When should you NOT use React.memo?
- How do you preserve the display name of a memoised component for debugging?
- How do you combine React.memo with forwardRef?
- How does shouldComponentUpdate relate to React.memo?
- When is it beneficial to memoize items inside a large list?
- What is the cost of React.memo on a hot render path?
useMemo and useCallback Patterns
- What does useMemo do and what problem does it solve?
- What does useCallback do and how is it different from useMemo?
- How do dependency arrays work in useMemo and useCallback?
- What is referential stability and why does it matter for memoization?
- When should you NOT use useMemo or useCallback?
- How do you decide if a computation is "expensive enough" to memoize?
- How do useMemo and React.memo work together?
- What is a stale closure in useCallback and how do you fix it?
- What are the common patterns for memoizing objects and derived data?
- Should callbacks be inlined or extracted with useCallback?
- Why should custom hooks wrap returned callbacks in useCallback?
- How can useMemo prevent unnecessary context consumer re-renders?
- What are the most common memoization correctness pitfalls in React?
- What is the ref-callback pattern and when does it replace useCallback?
- Do event handlers on DOM elements need useCallback?
Code Splitting and Lazy Loading
- What is code splitting and why does it matter in React?
- How do React.lazy and dynamic import() work together?
- Why is a Suspense boundary required when using React.lazy?
- What is the difference between route-based and component-based code splitting?
- What should you pass to the Suspense fallback prop?
- React.lazy only works with default exports. How do you lazy-load a named export?
- How should you handle errors when a lazy component fails to load?
- How can you preload a lazy component before the user navigates to it?
- How do you control the output chunk name for a lazy import?
- How does code splitting reduce initial load time?
- What are the limitations of React.lazy in a server-side rendering (SSR) environment?
- Can multiple lazy components share a single Suspense boundary?
- What are the key limitations of React.lazy?
- How do you code-split heavy third-party libraries in React?
- How do you measure the impact of code splitting on bundle size?
Suspense and Concurrent Rendering
- What does React Suspense do?
- What is the fallback prop on Suspense and when is it shown?
- What is the difference between using Suspense for lazy loading versus data fetching?
- What does "Suspense-compatible" data source mean?
- What does useTransition do and when should you use it?
- What is startTransition and how does it differ from the useTransition hook?
- What does useDeferredValue do?
- What is the difference between useTransition and useDeferredValue?
- What is "tearing" in concurrent rendering and how does React prevent it?
- What is the difference between ReactDOM.createRoot and the legacy ReactDOM.render?
- What does it mean that concurrent rendering is "interruptible"?
- How does nesting Suspense boundaries work and why would you nest them?
- How does Next.js use Suspense for streaming SSR?
- What is the "render-as-you-fetch" pattern and how does it differ from "fetch-on-render"?
- What is the React.use() hook and how does it integrate with Suspense?
React Routing
Routing Basics
- What is client-side routing and why does React use it?
- How do you install and minimally set up React Router v6?
- What is createBrowserRouter and how does it differ from BrowserRouter?
- What are the Routes and Route components, and how do they work together?
- How does path matching work in React Router v6 — is there an "exact" prop?
- How do nested routes work in React Router v6?
- What is the Outlet component and when is it required?
- What is an index route and when should you use one?
- What is the Link component and why should you use it instead of an anchor tag?
- How does NavLink differ from Link, and how do you style the active state in v6?
- How do you programmatically navigate in React Router v6?
- How do you create a 404 / catch-all route in React Router v6?
- What is the difference between BrowserRouter (history mode) and HashRouter (hash mode)?
- How does scroll restoration work with React Router v6?
- What is the gotcha with relative paths in nested routes?
- What does the useLocation hook return and when would you use it?
- How do you read dynamic URL segments in React Router v6?
- When should you use navigate with replace: true versus a normal push?
- What values can you pass to the "to" prop of Link?
- What error do you get when you use a React Router hook outside of a Router, and how do you fix it?
Dynamic and Nested Routes
- How do you define a dynamic URL segment in React Router v6, and how do you read it inside the component?
- What is the type of a route param returned by useParams, and what bug does that cause?
- Can a single route path contain more than one dynamic segment? Give an example.
- What is a splat route in React Router v6 and when would you use one?
- How do you make a route segment optional in React Router v6?
- What is Outlet in React Router v6 and why is it needed for nested routes?
- What is a layout route and how does it differ from a regular route?
- What is an index route in React Router v6 and when does it render?
- What is the difference between relative and absolute paths in nested route definitions?
- How do you structure three levels of nesting — an app shell, a section layout, and a detail page?
- How do you pass data from a parent route component to its child routes without prop drilling?
- How do you show a 404 page that still displays the parent layout's navigation?
- What is the difference between route params and URL search params, and which hook reads each?
- What are the differences between createBrowserRouter (object config) and the JSX <Routes>/<Route> approach?
- How does a route loader work in React Router v6.4+ and how does the component consume its data?
- How does errorElement bubble in a nested route tree?
- How do you navigate programmatically to a dynamic route, including the param?
- How does NavLink determine its active state inside a nested route?
- How would you validate a route param (e.g. ensure :id is numeric) and redirect if it is invalid?
- How do you type useOutletContext in TypeScript to avoid using any?
Navigation Hooks
- What does useNavigate return and how do you use it for programmatic navigation?
- What is the difference between navigate('/path') and navigate('/path', { replace: true })?
- How do you navigate back one step in history with useNavigate?
- How do you pass state when navigating with useNavigate and how do you read it on the destination page?
- What does useParams return and when would you use it?
- What fields does useLocation return and what is each one used for?
- How do you read query string parameters with useSearchParams?
- How do you update query parameters with useSearchParams without losing existing ones?
- How do you control whether setSearchParams pushes or replaces the history entry?
- What does useMatch do and what does it return?
- What is useRoutes and when would you choose it over JSX route declarations?
- What is useLinkClickHandler and when would you need it?
- What does useHref return and how is it different from just using the path string directly?
- How do you block navigation with useBlocker in React Router v6.4+?
- What is wrong with calling navigate() directly inside the render function of a component?
- What is the difference between navigate(-1) and window.history.back()?
- How does location.state persist across navigations and what are its limitations?
- How do you handle optional URL parameters when using useParams?
- When should you use useSearchParams instead of useState for managing filter values?
- What does the end option in useMatch control and when should you set it to false?
Protected Routes
- What is a protected route and why is it needed in a React SPA?
- How do you implement a RequireAuth wrapper component using React Router v6's Navigate?
- How do you preserve the intended destination so users land on the right page after login?
- How do you implement role-based access control (RBAC) in React Router v6 routes?
- How do you protect an entire branch of nested routes with a single layout route guard?
- How do you lazy-load protected route components with React.lazy and Suspense?
- Compare localStorage, cookies, and in-memory storage for auth tokens and their implications for routing guards.
- What is the difference between optimistic auth and a loading-state guard, and which should you use?
- How do you handle token expiry mid-session without forcing the user to re-login?
- Describe the AuthContext + useAuth hook pattern and why it's preferred for protecting routes.
- When should you use route-level guards versus component-level access checks?
- How do you test protected routes by mocking the auth context?
- What are the trade-offs between client-side route protection and server-side protection?
- Why should you use replace={true} on the Navigate redirect in an auth guard?
- How do you create a "public-only" route that redirects authenticated users away from the login page?
- How do you persist authentication state across a full page refresh in a React SPA?
- How do you compose multiple guards (auth + subscription + feature flag) on a single route?
- What causes an infinite redirect loop in protected routes and how do you fix it?
- When should you use the Navigate component versus the useNavigate hook in auth flows?
- How should a protected-route guard distinguish between a 404 (route not found) and a 403 (forbidden)?
React State Management
Redux Toolkit
- What problems does Redux Toolkit solve compared to plain Redux?
- How do you set up a Redux store with configureStore?
- What does createSlice do and what does it return?
- How does Immer make Redux reducers easier to write?
- How do useSelector and useDispatch connect components to the Redux store?
- How does createAsyncThunk handle asynchronous actions?
- What is the standard pattern for tracking loading and error state with createAsyncThunk?
- What is RTK Query and how does it differ from createAsyncThunk?
- How does RTK Query handle cache invalidation with tags?
- How do you use RTK Query hooks in a component?
- How does Redux DevTools work with RTK and what can you inspect?
- What is createEntityAdapter and when should you use it?
- How do you create memoized selectors with createSelector?
- How do you add custom middleware to a Redux Toolkit store?
- What is the recommended way to structure Redux slices in a large app?
- When should you NOT use Redux for state management?
- What is the prepare callback in createSlice and when do you use it?
- How do you perform a mutation with RTK Query and update the UI after it completes?
- How are Redux action type strings structured in Redux Toolkit?
Zustand
- What is Zustand and what problem does it solve?
- How do you create a Zustand store with `create()`?
- Why should you use a selector when reading from a Zustand store?
- Should Zustand actions live inside or outside the store?
- How do you handle async actions in Zustand?
- When and why do you use `shallow` equality in Zustand?
- How do you wire up Redux DevTools with Zustand?
- How does the `persist` middleware work in Zustand?
- How does Zustand's `immer` middleware change how you write state updates?
- What is the slices pattern in Zustand and when should you use it?
- How do you subscribe to a Zustand store outside of a React component?
- What are the trade-offs between Zustand and Redux Toolkit?
- How does Zustand compare to the React Context API for global state?
- How do you test a Zustand store?
- How do you add TypeScript types to a Zustand store?
- When should you prefer Zustand over component-local state?
- What is the recommended way to reset a Zustand store to its initial state?
- How do you derive computed values from a Zustand store?
Context vs Redux
- What is the Context API and what is its primary use case?
- What is the core mental model difference between Context and Redux?
- Why does Context cause excessive re-renders and when does it become a problem?
- When is Context sufficient — what kinds of state does it handle well?
- When does an app outgrow Context and actually need Redux?
- How do you split contexts to reduce unnecessary re-renders?
- How does Context + useReducer work as a lightweight Redux alternative?
- What is Redux middleware and why can't Context replicate it natively?
- What does Redux DevTools offer and why is it valuable?
- How does the boilerplate of Context compare to Redux Toolkit?
- How does useMemo help with Context performance and when is it required?
- What is the "no selector granularity" limitation of Context?
- Where do Zustand and Jotai fit between Context and Redux?
- How does testing differ between Context-based state and Redux?
- How do multiple small contexts compare to one large Redux store?
- How should you decide between global state (Context/Redux) and local component state?
- What are the Context gotchas in SSR / Next.js?
- How do you summarise the choice between Context and Redux for an interviewer?
Async State & React Query
- What is TanStack Query (React Query) and what problem does it solve?
- What are the three required / most-used options for useQuery?
- Why do query keys matter in React Query?
- What is the difference between staleTime and gcTime (cacheTime)?
- When does React Query automatically refetch data in the background?
- How do you handle loading, error, and success states with useQuery?
- How does useMutation work and what callbacks does it provide?
- How do you implement optimistic updates with useMutation?
- How does query invalidation work and why is it preferred over manual cache writes?
- How do you fetch query B only after query A has completed (dependent queries)?
- How does useInfiniteQuery work for paginated or infinite-scroll data?
- How do you set up QueryClient and QueryClientProvider?
- What is prefetchQuery and when would you use it?
- What is the difference between server state and client state, and why does it matter?
- How do you implement paginated data fetching with useQuery?
- When should you use React Query instead of Redux for data fetching?
- How does React Query compare to SWR?
- How does React Query integrate with React Suspense?
- How do you use React Query with SSR (e.g., Next.js) and avoid hydration mismatches?
- How do you poll an endpoint on a fixed interval with React Query?
React Patterns
Compound Components
- What are compound components and what problem do they solve?
- How do compound sub-components share state without prop drilling?
- What is the dot-notation API pattern and how do you set it up?
- What is the React.Children traversal approach to compound components and what are its drawbacks?
- How do you make a compound component support both controlled and uncontrolled modes?
- What is the difference between implicit and explicit state sharing in compound components?
- Why and how do you wrap a compound component's Context in a custom hook?
- How do you type a compound component API with TypeScript?
- Describe the compound component structure for an Accordion.
- How does the compound component pattern enable flexible composition that monolithic components cannot?
- When should you NOT use the compound component pattern?
- Walk through a minimal compound component implementation of a custom Select.
- How would you implement a compound Menu component with keyboard navigation?
- What should you pass as the default value to createContext in a compound component and why?
- How do you test compound components with React Testing Library?
- What performance concerns exist with Context-based compound components and how do you address them?
- How does the React Server Components model affect compound components that use Context?
- How do compound components compare to render props as a composition pattern?
- How do you handle ARIA attributes in compound components to ensure accessibility?
Render Props & HOCs
- What is the render props pattern and what problem does it solve?
- What is the function-as-child pattern and how does it differ from an explicit render prop?
- What is a Higher-Order Component (HOC) and what is its signature?
- How do you compose multiple HOCs and what utility makes that cleaner?
- Name three cross-cutting concerns that HOCs handle well and explain one in detail.
- What is prop collision in HOCs and how do you prevent it?
- Why did custom hooks largely replace render props and HOCs?
- When are render props still the right tool even in a hooks world?
- Why do HOCs lose static methods from the wrapped component and how do you fix it?
- How do you forward refs through a HOC?
- What are the performance implications of HOCs and render props?
- How do you type a HOC in TypeScript so that the wrapped component's props are preserved?
- What are two strategies for testing a HOC-wrapped component?
- When would you choose a render prop over a HOC, and vice-versa?
- What is "wrapper hell" and how do you recognise it in React DevTools?
- Can hooks fully replace HOCs for class components? What is the recommended migration path?
- Why is setting displayName on a HOC important and what is the correct format?
- Can you use render props with error boundaries? How?
- Why can inline render prop functions cause issues with PureComponent or React.memo and how do you fix it?
Error Boundaries
- What is an error boundary and what problem does it solve in React?
- What does getDerivedStateFromError do and when is it called?
- What is componentDidCatch and how does it differ from getDerivedStateFromError?
- Why must error boundaries be class components? Is there a hook-based alternative?
- What types of errors are NOT caught by error boundaries?
- At what granularity should you place error boundaries in an application?
- What should a good fallback UI include?
- How do you implement error recovery — letting the user retry after a crash?
- What does the react-error-boundary library provide over a hand-rolled boundary?
- How does useErrorBoundary let functional components interact with an error boundary?
- What is the resetKeys prop in react-error-boundary and when should you use it?
- How do you log errors to an external service like Sentry inside componentDidCatch?
- How do error boundaries work alongside React Suspense?
- Does concurrent mode (React 18) change how error boundaries behave?
- What happens if an error boundary's own render method throws?
- How do you test an error boundary with React Testing Library?
- How do you test the reset/retry behavior of an error boundary?
- When should you use an error boundary vs a try/catch block in React code?
- Can you have multiple error boundaries in the same component tree? How should they be nested?
- Why do error boundaries behave differently in development vs production?
Portals & Refs
- What does ReactDOM.createPortal do and when should you use it?
- A portal renders its children in a different DOM node. Does that affect React context or event propagation?
- How do synthetic events bubble through a portal? Why is this a common interview gotcha?
- Why do modals rendered inside a deeply nested component often break z-index stacking, and how does createPortal fix it?
- How should you handle focus management and accessibility for a portal-based modal?
- How does React clean up a portal when the component unmounts?
- How do you test a component that uses createPortal?
- What does useRef return and what are its two main use cases?
- What is the key difference between a ref and state, and when would you choose one over the other?
- What is a callback ref and when is it more useful than useRef?
- What is ref forwarding and why is it needed for custom components?
- What does useImperativeHandle do, and when should you use it?
- How do you use a ref to track the previous value of a prop or state variable?
- Why should you store setTimeout or setInterval IDs in a ref rather than state?
- How do you access a child component's DOM node from a parent component?
- When do refs indicate a design smell in a React component?
- Why can't you reliably read a ref's value during the render phase?
- When should you use a portal versus simply conditionally rendering a component at the top of the tree?
- How do you use a ref to scroll to an element or measure its dimensions?
- Can you render multiple portals on the same page, and how should you manage their mount points?
forwardRef & useImperativeHandle
- Why can't you pass a ref directly to a function component the same way you pass one to a DOM element?
- What does `React.forwardRef` do and what does its callback signature look like?
- What does `useImperativeHandle` do, and why would you use it instead of forwarding a raw DOM ref?
- Write the canonical "custom input" that uses `forwardRef` + `useImperativeHandle` together to expose `focus`, `blur`, and `clear`.
- When is exposing an imperative handle appropriate, and when should you prefer props/state instead?
- What are the trade-offs between forwarding a raw DOM ref versus exposing a custom imperative handle?
- How do you correctly type a `forwardRef` component in TypeScript, including the `ref` and props generics?
- How do you type `useImperativeHandle` when the exposed handle is a custom interface?
- How does React 19 change ref handling, and is `forwardRef` still needed?
- How do `React.memo` and `forwardRef` interact, and in what order should you compose them?
- Show a real-world "modal open/close" pattern where the parent triggers `open()` and `close()` imperatively.
- Demonstrate using `forwardRef` for focus management in a form with multiple inputs.
- How would you expose animation controls (play, pause, reset) from a child component via `useImperativeHandle`?
- What is `ForwardedRef<T>` in TypeScript and when do you need it over `Ref<T>`?
- How do you test a `forwardRef` component that exposes an imperative handle in React Testing Library?
- When should you provide a non-empty `deps` array to `useImperativeHandle`, and what happens if you omit it?
- How do you support both a forwarded ref and an internal ref pointing at the same DOM node — the "mergeRefs" pattern?
- What are the most common mistakes developers make when using `forwardRef` and `useImperativeHandle`?
- How do you set a meaningful display name on a `forwardRef` component for React DevTools?
- How would you implement a `scrollIntoView()` imperative handle to let a parent scroll a child list item into view?
React Testing
RTL Basics
- What is React Testing Library and what is its core testing philosophy?
- What does `render()` do and what does it return?
- What are the three query variants — `getBy`, `queryBy`, `findBy` — and when should you use each?
- What is `screen` and why is it preferred over the queries returned by `render()`?
- In what priority order should you choose RTL queries, and why?
- What is the difference between `userEvent` and `fireEvent`?
- What is `waitFor` and when should you use it?
- What does `@testing-library/jest-dom` provide and what are the most useful matchers?
- What is `within()` and when is it useful?
- How do you test a component that fetches data on mount?
- How do you set up React Testing Library with Vitest?
- How do you test a component that should update when its props change?
- How do you render a component that requires context providers or a router?
- What tools does RTL provide to debug failing tests?
- Can you create custom RTL queries, and when would you need one?
- When should you use `renderHook` instead of rendering a component?
Component Interaction Testing
- How do you test a button click with React Testing Library?
- How do you test form submission?
- How do you test a controlled input that updates as the user types?
- How do you test conditional rendering?
- How do you test a component that consumes React context?
- How do you test components that use React Router hooks like `useNavigate` or `useParams`?
- How do you test that a list renders the correct number of items?
- How do you test a component that renders into a portal (`ReactDOM.createPortal`)?
- How do you test keyboard navigation and focus management?
- How do you test error boundaries?
- How do you write an integration test covering multiple components together?
- How do you test that a callback prop is called with the right arguments?
- How do you test checkboxes, radio buttons, and select elements?
- How do you test that a button or input is disabled, and that it can't be interacted with?
- What is snapshot testing and when should (and shouldn't) you use it with RTL?
Mocking Async
- How do you mock `fetch` in React component tests?
- What is Mock Service Worker (MSW) and how do you set it up with RTL?
- How do you test loading states in a component that fetches data?
- How do you test error states from failed API calls?
- How do you test components that use `setTimeout` or `setInterval`?
- How do you mock an entire module (e.g., an API client) in Vitest?
- How do you test components that use React Query (`useQuery`, `useMutation`)?
- How do you test debounced or throttled functions inside components?
- How do you mock `localStorage` in tests?
- What does the "act() warning" mean and how do you fix it?
- How do you test that a component logs errors or warnings without polluting test output?
- How do you test a component that polls an API at a regular interval?
- How do you test that a component handles race conditions — e.g., only showing the result of the latest request?
Testing Custom Hooks
- What is `renderHook` and how does it work?
- Why do you need to wrap hook state updates in `act()`?
- How do you test a custom hook that fetches data asynchronously?
- How do you test a hook that depends on React context?
- How do you test the side effects of a custom hook that uses `useEffect`?
- How do you test a custom hook that internally uses `setTimeout` or `setInterval`?
- How do you test a hook built on `useReducer`?
- How do you test a hook that accepts arguments, and test how it behaves when those arguments change?
- When should you test a custom hook directly with `renderHook` versus testing it through the component that uses it?
- How do you mock a module dependency used inside a custom hook?
- How do you test a custom hook that uses `useRef` to interact with DOM elements?
- How do you verify that a custom hook properly cleans up its effects on unmount?
- How do you test that a hook throws an error under invalid conditions?
More ways to practice
The self-quiz is live. Get notified when mock interviews and new question packs drop.
or
Join our WhatsApp Channel