React mock interview with an AI interviewer

What is the difference between props and state?

What a strong answer covers:Props are inputs passed from a parent and are read-only inside the component; state is data the component owns and changes over time with a setter. Changing either causes a re-render, but only the owner can change state. A strong answer adds that data flows down through props and changes flow up through callbacks.

Why does React need a key on list items, and why is the array index often a bad key?

What a strong answer covers:Keys let React match elements between renders so it can keep, move or remove the right component instances and their state. An index key breaks when items are inserted, removed or reordered: state and DOM such as input values get attached to the wrong item. Use a stable unique ID from the data; index is only fine for static lists that never change order.

How does the useEffect dependency array work, and what is the cleanup function for?

What a strong answer covers:No array means the effect runs after every render, an empty array means once after mount, and a list of values means it re-runs when any of them changes by Object.is comparison. The cleanup runs before the next effect run and on unmount, so it is where you remove listeners, clear timers or abort requests. Mention that StrictMode in development mounts, unmounts and remounts components to surface missing cleanup.

What is the difference between controlled and uncontrolled inputs?

What a strong answer covers:A controlled input gets its value from React state and updates it through onChange, so React is the single source of truth. An uncontrolled input keeps its value in the DOM and you read it via a ref or FormData on submit. Controlled is useful for instant validation or dependent fields; uncontrolled is simpler and pairs well with React 19 form actions.

Why can you not call hooks inside conditions or loops?

What a strong answer covers:React identifies each hook by its call order within a component, not by name. If a condition skips a hook on one render, every following hook reads the wrong stored state. Hooks must be called at the top level of a component or custom hook, and the eslint-plugin-react-hooks rules enforce this; the new use API is the one exception that can be called conditionally.

When does a component re-render, and how does reconciliation decide what to update in the DOM?

What a strong answer covers:A component re-renders when its state changes, its parent re-renders, or a context it reads changes; props changing alone is not the trigger, the parent render is. React then compares the new element tree with the previous one: a different element type at the same position remounts the subtree, the same type updates props, and keys match list children. Only the resulting differences are applied to the DOM in the commit phase.

When do useMemo, useCallback and React.memo actually help, and when are they wasted?

What a strong answer covers:They help when a computation is genuinely expensive, or when a stable reference prevents re-rendering a memoized child or re-running an effect. They are wasted when the child is not memoized, when dependencies change every render, or when the work is cheap, because memoization has its own cost. A strong answer mentions that the React Compiler can add this memoization automatically, so manual use is now more about targeted fixes found with the Profiler.

What is a stale closure in a React component and how do you fix it?

What a strong answer covers:A function created during a render captures the props and state of that render; if an interval or listener keeps using it, it sees old values. Fixes: include the value in the effect dependencies, use the updater form like setCount(c => c + 1), keep the latest value in a ref, or use useEffectEvent for logic that should read fresh values without re-triggering the effect.

What are the performance pitfalls of React Context, and how would you structure global state?

What a strong answer covers:Every consumer re-renders when the context value changes, and passing a new object literal each render changes it every time. Mitigate by memoizing the value, splitting contexts by update frequency, or using a store with selectors such as Zustand or Redux Toolkit. Also separate server state, handled by TanStack Query or framework data loading, from UI state, which often stays local.

What problem do useTransition and useDeferredValue solve?

What a strong answer covers:They mark some updates as non-urgent so React can keep urgent ones, like typing, responsive and interrupt the slow render. useTransition wraps the state update you control and gives an isPending flag; useDeferredValue gives a lagging copy of a value you receive, for example to filter a big list. They do not make rendering faster, they change its priority.

How do Server Components differ from Client Components, and where would you put the "use client" boundary?

What a strong answer covers:Server Components run only on the server, can read data directly and send no JavaScript for themselves to the browser, but cannot use state, effects or browser APIs. "use client" marks the entry into the client bundle, and everything it imports becomes client code, so push the boundary down to small interactive leaves. Props crossing the boundary must be serializable, and Server Components can still be passed into Client Components as children.

A page in your React app feels slow. How do you find and fix the cause?

What a strong answer covers:First measure: React DevTools Profiler to see which components render, how often and why, plus the browser Performance panel and INP for interaction cost. Typical causes are broad context or store updates, unstable props defeating memo, huge lists, and heavy work during render. Fixes follow the cause: move state down, split context or use selectors, virtualize lists, memoize or rely on the React Compiler, code-split, and use transitions for non-urgent updates.

What causes hydration mismatches, and how does streaming SSR with Suspense change hydration?

What a strong answer covers:A mismatch happens when the server HTML differs from the first client render, for example because of Date.now, Math.random, locale formatting, reading window or localStorage during render, or invalid HTML nesting. Fix by making the first render deterministic and moving browser-only values into an effect. With streaming, Suspense boundaries send HTML in chunks and hydrate independently, and React prioritizes hydrating the part the user interacts with.

How do Actions work in React 19, and what do useActionState and useOptimistic add?

What a strong answer covers:An Action is an async function used in a transition, for example passed to a form action prop; React tracks the pending state, resets uncontrolled forms on success and routes thrown errors to error boundaries. useActionState wraps an action and returns its last result, a dispatch function and isPending. useOptimistic shows a temporary value while the action runs and automatically reverts to real state when it settles.

How would you design a testing strategy for a large React codebase?

What a strong answer covers:Test behavior the user sees: React Testing Library queries by role and label, user-event for interactions, and mocked network with MSW rather than mocked hooks. Keep most tests at the component and integration level, add a small set of end-to-end tests with Playwright for critical flows, and keep pure logic in unit tests. Role-based queries also catch accessibility regressions, which is a point worth making explicitly.