0-2 years experience
React Interview Questions for Freshers
The React questions asked of freshers and junior developers, with short answers you can say out loud: JSX, virtual DOM, props and state, hooks basics and keys.
React Interview Questions and Answers
This is a working set of React interview questions with real answers, organised the way you would actually revise: by topic when you want to fill a gap, and by experience level when you have an interview on Thursday.
Every answer opens with the two or three sentences you would say out loud, then explains the reasoning behind it, because the follow-up question is where interviews are won or lost. Where a question has a common trap, it is called out. Where a question has a matching quiz on this site, there is a link to go and get it wrong a few times, which works far better than reading.
158
Questions
12
Topics
3
Levels
Start with your experience level
Each guide covers what that round is actually like, the questions that come up, and a plan for the week before.
2-5 years experience
React Interview Questions for Experienced Developers
React interview questions for developers with 2 to 5 years experience: memoisation, effects done properly, state management choices, routing, testing and TypeScript.
5+ years experience
Senior React Developer Interview Questions
Senior React interview questions on Fiber, reconciliation, concurrent rendering, Server Components, hydration, architecture, auth and building component libraries.
Browse by topic
Every question has a full answer, the reasoning behind it, and the follow-ups an interviewer is likely to ask next.
React Basics
The fundamentals every React interview starts with: JSX, the virtual DOM, props versus state, elements versus components and keys.
16 questionsComponents & Props
Composition, prop drilling, children, higher order components, render props and the patterns interviewers use to test how you structure a component tree.
13 questionsReact Hooks
useState, useEffect, useMemo, useCallback, useRef, useReducer, custom hooks and the rules of hooks, answered the way an interviewer wants to hear them.
18 questionsState Management
Context versus Redux, Redux Toolkit, Zustand, TanStack Query, client state versus server state, and how to justify the choice you made.
14 questionsLifecycle & Effects
Mounting, updating and unmounting, the class lifecycle methods and their hook equivalents, render versus commit, stale closures and correct data fetching.
12 questionsPerformance
Unnecessary re-renders, React.memo, code splitting, virtualisation, the Profiler and the React Compiler, with the measurement-first answers interviewers expect.
14 questionsForms & Events
Controlled versus uncontrolled inputs, synthetic events, event delegation, validation, and the React 19 form actions that replace most of the boilerplate.
11 questionsReact Router
Client side routing, BrowserRouter versus HashRouter, useParams, useNavigate, nested routes, protected routes and data loaders.
11 questionsAdvanced React
Fiber, reconciliation, concurrent rendering, Suspense, error boundaries, portals, Server Components, hydration and rendering strategies for senior interviews.
16 questionsReact + TypeScript
Typing props, children, state, refs and events, why React.FC fell out of favour, generic components and typed reducers.
11 questionsTesting
React Testing Library, queries, user events, async assertions, mocking network requests, testing hooks and what is worth testing at all.
10 questionsCoding Challenges
The components and hooks that come up in React machine coding rounds — debounced search, custom hooks, modals, infinite scroll, autocomplete — with worked solutions.
12 questionsThe most asked React interview questions
If you only have an evening, these are the ones that come up again and again, whatever the level of the role.
1.What is React?
FresherReact is an open source JavaScript library for building user interfaces out of components, where you describe what the UI should look like for a given state and React works out how to update the DOM.
React BasicsRead the full answer
JSX is a syntax extension that lets you write markup inside JavaScript. It is not part of the browser: a compiler such as Babel or SWC turns it into ordinary function calls that create React elements.
React BasicsRead the full answer
The virtual DOM is an in-memory tree of plain JavaScript objects describing the UI. On each render React builds a new tree, compares it with the previous one, and applies only the differences to the real DOM.
React BasicsRead the full answer
Props are data passed into a component from its parent and are read only inside that component. State is data a component owns and can change, and changing it triggers a re-render.
React BasicsRead the full answer
A key is a stable identifier that tells React which item in a list is which between renders, so it can move, keep or remove the right DOM nodes and component state instead of guessing by position.
React BasicsRead the full answer
No. The setter schedules a re-render. The state variable in the current render keeps its old value, and the new value is only visible in the next render.
React BasicsRead the full answer
Composition means building a component by passing other components into it, usually through children or named props, instead of extending a base component. React recommends it because a component's output is data, so passing that data around is more flexible than inheriting behaviour.
Components & PropsRead the full answer
Prop drilling is passing a prop through components that do not use it, just to reach a descendant that does. You avoid it with component composition, with context, or with a state library, in that order.
Components & PropsRead the full answer
9.What is a higher order component?
Mid-levelA higher order component is a function that takes a component and returns a new component wrapping it with extra behaviour. It was the pre-hooks way of sharing non visual logic between components.
Components & PropsRead the full answer
Hooks are functions that let a function component use state, effects and other React features. They were introduced in React 16.8 to make stateful logic reusable without wrapper components, and to stop related code being split across lifecycle methods.
React HooksRead the full answer
Only call hooks at the top level of a component or another hook, never inside conditions, loops or nested functions, and only call them from React function components or custom hooks. React identifies hooks by call order, so the order must be identical on every render.
React HooksRead the full answer
12.How does useState work?
FresheruseState returns a pair: the current value for this render and a setter. Calling the setter schedules a re-render with the new value; it does not change the variable you are currently holding.
React HooksRead the full answer
13.What is useEffect and when does it run?
FresheruseEffect runs a function after React has committed the render to the DOM and the browser has painted. It runs after every render by default, or only when a value in the dependency array has changed.
React HooksRead the full answer
No array means the effect runs after every render. An empty array means it runs once after mount. A populated array means it re-runs whenever one of those values changes by reference or value.
React HooksRead the full answer
useEffect runs asynchronously after the browser has painted. useLayoutEffect runs synchronously after the DOM is updated but before paint, so it can measure and adjust layout without the user seeing a flicker.
React HooksRead the full answer
useReducer holds state and updates it by dispatching actions to a reducer function. Prefer it when several state values change together, when the next state depends on the previous one in non-trivial ways, or when the update logic is worth testing on its own.
React HooksRead the full answer
useMemo caches the value a function returns; useCallback caches the function itself. useCallback(fn, deps) is exactly useMemo(() => fn, deps).
React HooksRead the full answer
useRef returns a mutable object with a .current property that survives re-renders and never triggers one. It is used to reach a DOM node, and to store a mutable value that the UI does not display, such as a timer id or the previous value of a prop.
React HooksRead the full answer
A custom hook is a function whose name starts with use and which calls other hooks. Write one when the same stateful logic appears in more than one component, or when a component's logic is complex enough that naming it makes the component readable.
React HooksRead the full answer
Local useState, lifted state, context, a client store such as Redux Toolkit or Zustand, and a server state library such as TanStack Query. Choose by asking who needs the value, how often it changes, and whether it came from a server.
State ManagementRead the full answer
How to use this
A week before an interview, work through the experience level guide that matches the role, then open the topic pages for anything whose one line answer you could not say without reading it. The day before, read only the questions marked as most asked.
Reading is not practising
Recognising an answer is not the same as being able to give one. Use the quizzes to find the questions you only think you know, and the tutorials when an answer showed you a real gap.