React interview questions and answers
React interviews in India run for frontend and full-stack roles, at product companies and increasingly at services companies staffing digital projects. Freshers get hooks and rendering. Experienced candidates get one question in several disguises: why does this component re-render, and where does the state actually live?
Asked of: Frontend and full-stack developers at product companies and digital services teams. Every answer below describes what a strong response covers rather than a script to memorise, because the follow-up question is where these rounds are actually decided.
Rendering and reconciliation
What the virtual DOM does, what triggers a re-render, and why keys matter in a list.
Hooks
useState, useEffect and the dependency array, plus custom hooks. Most follow-ups here are closure questions in disguise.
State and data fetching
Local state against context against a server cache, and knowing which of the three a piece of data belongs in.
Performance
Memoisation and its cost, long lists, and how you would find a slow render rather than guess at it.
The surrounding stack
Next.js and the App Router, TypeScript, and testing with React Testing Library. Say which of these you have used in production.
React interview questions for freshers
What is the virtual DOM?
An in-memory description of the UI that React diffs against the previous one, so it can apply the smallest set of real DOM changes. Do not say it is faster than the DOM. Say it makes updates predictable, and that hand-written DOM code can be faster and rarely stays correct.
What is the difference between props and state?
Props come from the parent and are read-only inside the component. State is owned by the component and changing it schedules a re-render. The follow-up is usually where a given piece of data should live.
Why does React need a key in a list?
To match elements between renders so it can move rather than rebuild them. Then explain why the array index is a bad key: insert or reorder an item and React keeps the wrong state attached to the wrong row, which shows up as an input holding another row's text.
How does the useEffect dependency array work?
The effect runs after render and again whenever a dependency changes. Leave a value out and the effect keeps seeing the value from the render it was created in, which is the stale closure bug. Mention the cleanup function and what it is for.
Controlled or uncontrolled input?
Controlled means React state is the source of truth through value and onChange. Uncontrolled leaves the value in the DOM and you read it with a ref. Say which you would use for a large form and why, since that is where the cost shows up.
Why does my state look wrong right after I set it?
Because setting state schedules a re-render rather than mutating a variable, and updates are batched. Read the new value in the next render, and use the functional updater form when the next value depends on the previous one.
What does it mean to lift state up?
Moving state to the closest common parent when two components need it. Add the practical limit: lift it too far and every child re-renders, which is the reason context and server caches exist.
How do the class lifecycle methods map to hooks?
componentDidMount is an effect with an empty dependency array, componentDidUpdate is an effect with dependencies, componentWillUnmount is the cleanup returned from the effect. Say that the mapping is a translation aid rather than how you would design new code.
What causes a component to re-render?
Its own state changing, its parent re-rendering, or a context it consumes changing. Note that a parent re-render re-renders children even when their props are identical, unless the child is memoised.
What is wrong with {count && <Badge />}?
When count is 0, React renders the 0 instead of nothing, because 0 is falsy but still a valid node. Use a real boolean or a ternary. It is a small question that tells the interviewer whether you have shipped and debugged UI.
React interview questions for experienced candidates
When should you not use useMemo or useCallback?
When you have not measured. Memoisation costs a comparison and memory on every render, and most components are cheap. They earn their place for expensive computations and for referential stability that a memoised child or a dependency array depends on.
Why does everything re-render when I put state in context?
Every consumer re-renders when the context value's identity changes, and an object literal creates a new identity each render. Memoise the value, and split one context into separate ones so a component only subscribes to what it uses.
What are the rules of hooks, and why do they exist?
Call them at the top level and in the same order every render, because React tracks them positionally. Conditional hooks break that mapping. Follow with what makes a good custom hook, which is extracting behaviour rather than markup.
Why does my effect run twice in development?
StrictMode mounts, unmounts and remounts on purpose to surface effects that are not cleaned up or not idempotent. It does not happen in production. The right response is to fix the effect rather than to disable StrictMode.
When do you reach for a server component in the Next.js App Router?
For anything that only reads data and renders markup, keeping the fetch and its secrets on the server and shipping less JavaScript. Move to a client component at the point you need state, effects or event handlers, and know that props crossing that boundary must be serialisable.
Where does server data belong in your state?
In a cache built for it, such as TanStack Query, rather than in a global store you sync by hand. Explain the distinction you are making: server state is a copy of something you do not own, and it needs invalidation, refetching and staleness rules.
What do error boundaries not catch?
Errors inside event handlers, in asynchronous code after the render, and on the server side of the tree. Say what you actually do about those, which is handling them where they happen and reporting them.
A list of five thousand rows scrolls badly. What do you do?
Render only what is visible with virtualisation, keep keys stable, and stop passing freshly created objects and callbacks into each row. Measure first, because the cost is sometimes in a parent that re-renders the whole list.
How do you find out why a render is slow?
The React Profiler, looking at which components rendered and what committed. Name the last time you did this and what it turned out to be. Guessing at memoisation without profiling is the answer that marks someone as untested.
What do you test in a React component?
The behaviour a user can observe: query by role and text, interact, and assert on what appears. Avoid asserting on state or implementation details, because those tests break on every refactor and pass through real bugs.
- Bring one application you built and know its render path. "Where does this data come from?" is the question that ends most React interviews.
- Never describe the virtual DOM as faster than the DOM. Interviewers hear the difference between a memorised line and an understood one.
- If everything you have written is Next.js, say so. Some questions assume plain React with a separate router, and the answers differ.
- Most hook questions are closure questions underneath. Get comfortable with closures and half of this list becomes easier.
Answer them out loud before someone asks
Reading a question and answering it under a follow-up are different skills. Practise these against an AI interviewer that pushes back and scores your answer, or check your resume first with the free ATS resume checker.
Start My Free Mock Interview