In this article
React basics
What is React and why would you use it?
In a coding interview loop, React is a JavaScript library for building user interfaces (UI) out of components: small functions that return what should appear on screen. React's own site calls it the library for web and native user interfaces. You describe the screen for the current data, and React works out how to update the page, so you do not change the page by hand.
Why it is asked: it checks that you can state the core idea before the details. Read the full explanation: react.dev, Quick Start.
What are components and props?
A component is a function that returns markup describing part of the screen. Props are the inputs a parent passes to it, like function arguments. A component treats its props as read-only and returns the same output for the same props and state, which keeps it predictable. A parent shows a child differently by passing different props, never by editing the child.
Why it is asked: it tests whether you think in data flowing down a tree. Read the full explanation: react.dev, Passing Props to a Component.
What is the difference between state and props?
Props come from the parent and are read-only in the child. State is memory that belongs to the component and changes only through its set function. Calling the set function queues a render, so the screen follows the new value. When two siblings need the same data, move the state to their nearest common parent and pass it down as props.
Why it is asked: ownership of data is the root of most design discussions. Read the full explanation: react.dev, Sharing State Between Components.
What is the difference between controlled and uncontrolled inputs?
A controlled input takes its value from state and updates that state in a change handler, so React is the single source of truth. An uncontrolled input keeps its value in the browser, and you read it when needed, for example when the form is submitted. Controlled suits live validation and formatting; uncontrolled is simpler for a form read once. Do not switch one input between the two.
Why it is asked: forms are common in take-home and live tasks. Read the full explanation: react.dev, the input reference.
Rendering and state
Does rendering mean updating the DOM?
No. Rendering is React calling your components to work out what should be on screen. Committing is the step where React changes the Document Object Model (DOM), the browser's tree of page elements. The react.dev analogy is a restaurant: rendering is the kitchen preparing the order and committing is placing it on the table (react.dev, Render and Commit). A render alone does not touch the page.
Why it is asked: it is the most common misconception about React. Read the full explanation: react.dev, Render and Commit.
What happens when state changes?
React shows UI in three steps: trigger, render, commit. The first render is triggered by calling createRoot and then render with your component. Later renders are triggered by calling a state set function, which queues a render. React then calls the affected components and commits the result to the DOM.
Text description of the diagram
- React shows a change in three steps: trigger, render, commit.
- A state set function queues a render, and committing updates the page.
Why it is asked: it shows whether you can trace an update from click to screen. Read the full explanation: react.dev, Render and Commit.
Does calling setState change the variable immediately?
No. The set function queues a render; the code already running still sees the old value, and the next render receives the new one. Logging right after setCount(count + 1) prints the old value. When the new value depends on the previous one, pass an updater function such as setCount(c => c + 1) so repeated calls build on each other.
Why it is asked: it exposes a wrong mental model that causes stale-value bugs. Read the full explanation: react.dev, Render and Commit.
Why do lists need a key, and why not use the index?
A key is a stable identifier, such as a database id, given to each item in a rendered list so React can match items between renders. Use the item's own id rather than its array position when the list can be reordered, inserted into or filtered, or state can attach to the wrong item. A changed key also makes React treat the element as a new one and reset its state.
Why it is asked: key bugs are subtle and common. Read the full explanation: react.dev, Rendering Lists.
What is the virtual DOM?
The usual explanation is that React works from a lightweight description of the screen, which is what your components return, compares it with the previous description, and changes only what differs in the real DOM. The official docs explain the cycle as render then commit, so describe that sequence. Avoid claiming the virtual DOM is always faster; it is a way to keep updates declarative.
Why it is asked: it is a classic phrase, and a precise answer stands out. Read the full explanation: react.dev, Render and Commit.
Why does my component render twice in development?
When strict mode is on, each component renders twice rather than once in development, so you will see duplicate logs. This is a reason to keep render code free of side effects: the same props and state should always give the same output. Production builds do not double the render, so measure performance on a production build.
Why it is asked: it tests whether you know why render code must be pure. Read the full explanation: react.dev, the strict mode reference.
Knowing it is half the job. Saying it is the other half.
Interview Clozo is an AI interview copilot for real interview rounds: it hears the question and puts a strong answer on your screen, and you say it in your own words. See the features or how it works.
Start Free Trial →Hooks and effects
What are the rules of Hooks?
Functions whose names start with use are called Hooks. Do not call Hooks inside loops, conditions, nested functions or try/catch/finally blocks; call them at the top level of a function component or a custom Hook, before any early return. Do not call them from ordinary JavaScript functions. React relies on the same order of calls on every render, and the undefined plugin helps catch mistakes.
Why it is asked: breaking the rules causes hard bugs, so it separates careful users from copiers. Read the full explanation: react.dev, Rules of Hooks.
What is useEffect for?
Effects are an escape hatch that synchronizes a component with an external system, such as a non-React widget, the network or the browser DOM. Use one for code that should run because the component was displayed. Code that should run because the user did something, such as sending a purchase request after a click, belongs in an event handler.
Why it is asked: effect misuse is the most common source of React bugs. Read the full explanation: react.dev, You Might Not Need an Effect.
Should you use an effect to compute derived data?
No. When something can be calculated from existing props or state, do not put it in state; calculate it during rendering. A fullName built from firstName and lastName is a plain constant. An effect that sets state forces an extra render with a stale value first, so it is slower and easier to get out of sync.
Why it is asked: it shows whether you keep state minimal. Read the full explanation: react.dev, You Might Not Need an Effect.
What does the dependency array do, and what is cleanup?
The dependency array lists the values the effect reads, with three cases. With values in it, React re-runs the effect only when one changed. An empty array runs it after the component is first displayed. With no array, it runs after every render. A cleanup function the effect returns runs before the next run and when the component is removed, to unsubscribe or clear a timer. In development, strict mode runs setup and cleanup one extra time. The Hooks lint plugin flags missing dependencies.
Why it is asked: it tests the effect lifecycle in practice. Read the full explanation: react.dev, the useEffect reference.
How do you reset a component's state when a prop changes?
Pass the changing value as a key to the inner component. Normally React keeps state when the same component appears in the same place; with a new key, React recreates the DOM and resets the state of that component and all its children. This is better than an effect that calls the set function, which renders once with the stale value and then again.
Why it is asked: it separates a candidate who knows keys beyond lists. Read the full explanation: react.dev, You Might Not Need an Effect.
When would you use useRef instead of state?
Use a ref for a value the component must remember between renders but that does not appear in the output, such as a timer id or a DOM node. Changing ref.current does not queue a render, whereas a state set function does. Because of that, avoid reading or writing a ref during rendering; do it in event handlers or effects. If the screen should change with the value, use state.
Why it is asked: it tests whether you know what triggers a render. Read the full explanation: react.dev, the useRef reference.
What is a custom Hook, and when do you write one?
A custom Hook is a function whose name starts with use and that calls other Hooks, so several components can share the same logic, such as subscribing to the window size or fetching data. It shares logic, not state: each component that calls it gets its own state. Write one when you repeat the same Hook pattern, and follow the rules of Hooks inside it.
Why it is asked: it shows whether you can structure reusable code. Read the full explanation: react.dev, Reusing Logic with Custom Hooks.
Performance and shared state
When should you use useMemo, useCallback or memo?
Only when measurement shows a cost. The useMemo Hook caches a calculation and skips it when its dependencies are unchanged; it does not make the first render faster, and the calculation must be pure. The same docs note that React Compiler can memoize automatically in many cases. Wrapping everything adds code without proof of benefit. useCallback and memo follow the same rule.
Why it is asked: it separates premature optimization from measured tuning. Read the full explanation: react.dev, You Might Not Need an Effect.
How do you find out why a React screen is slow?
Measure first. The docs suggest wrapping a suspect calculation in console.time and console.timeEnd, repeating the interaction, and adding up the logged time. Test with central processing unit (CPU) throttling, because your machine is faster than users', and on a production build, since development timings are inflated by double rendering. Memoize only what the numbers show is expensive.
Why it is asked: senior rounds expect a method, not a list of tricks. Read the full explanation: react.dev, You Might Not Need an Effect.
When would you use Context or Redux instead of local state?
Start with local state and lift it to a common parent. In a Redux vs Context comparison, Context passes a value down the tree without threading props through every level; it suits data that changes rarely, such as a theme or the signed-in user. A store library such as Redux earns its place when many distant components read and update the same fast-changing data and you want one place for update rules. This is judgment, not a rule; justify it with the app's shape.
Why it is asked: it tests whether you pick the simplest tool and can say why. Read the full explanation: react.dev, Passing Data Deeply with Context.
Errors and modern React
What are error boundaries?
An error boundary is a component that catches errors thrown while rendering its children and shows a fallback instead of crashing the whole tree. It is written as a class component using static getDerivedStateFromError or componentDidCatch; there is no function-component form of it. It does not catch errors inside event handlers. Place boundaries around parts of the screen that can fail independently.
Why it is asked: it tests whether you plan for failure in the UI. Read the full explanation: react.dev, the Component reference.
What are React Server Components?
Server Components are components that render ahead of time, on a server or at build time, in an environment separate from the client app. Their code is not sent to the browser, so they can read data directly and keep the client bundle smaller. They cannot hold interactive state or use event handlers; interactive parts stay in client components. React 19 documents them as stable for use through a framework.
Why it is asked: it checks whether your knowledge extends past client-only React. Read the full explanation: react.dev, Server Components.
What does useTransition do?
The useTransition Hook lets you mark a state update as a transition: non-urgent work that React can interrupt if something more urgent, such as typing, arrives. The screen stays responsive while a slow update, such as filtering a large list, renders in the background. This is part of concurrent rendering, in which React can pause and resume rendering. Use it for slow updates, not as a general speed-up.
Why it is asked: it tests whether you understand responsiveness beyond memoization. Read the full explanation: react.dev, the useTransition reference.
Follow-up questions
What are the common React interview questions?
The twenty-three above cover the ones that recur in searches: what rendering means, state versus props, keys, the rules of Hooks, when to use an effect, and when to memoize. For the language underneath them, such as closures and this, read the JavaScript interview questions. If your target role uses another framework, the Angular interview questions cover its equivalents.
What React interview questions are asked for experienced and senior developers?
Questions for people with several years of experience, including the five, ten or more years that searchers ask about, usually repeat these topics at greater depth: why an effect is wrong, how to find a slow render, when state should move or be shared, and how a decision affects a team. Be ready to give a trade-off and a measurement, not only a definition. Public reports of what a given company asks are not collected here.
What are React coding interview questions?
Typically a small component built live, such as a counter, a filtered list, a form with validation or a search box that fetches data. Say your plan aloud, keep derived values out of state, put event logic in handlers and fetching in a well-reasoned effect, and test an edge case. The routine for any coding round is in the coding interview guide.
Are there React system design interview questions?
Yes, in frontend-focused loops a design question can ask you to structure the components, state and data fetching for a feed, a dashboard or an editor. Cover where state lives, how updates reach the screen, and how you would keep it fast. For the server side of the same conversation, see the full stack developer interview questions, and for the network side, the computer networks questions. On the React side, Passing Data Deeply with Context and Sharing State Between Components cover where state lives.
Have React interview questions changed in recent years?
The fundamentals on this page, rendering, state, keys and the rules of Hooks, are in the current docs. What moves is the platform around them. The react.dev page on effects now notes that React Compiler can memoize expensive calculations automatically in many cases, so expect to be asked when manual memoization is still needed. The React 19 release post adds Server Components, Actions and the use application programming interface (API), so expect questions on those and on useTransition. Check the docs for your target version before an interview.
- Rendering is React calling your components; committing is what changes the page.
- A set function queues a render; the running code still sees the old value.
- Call Hooks only at the top level, and use effects only to synchronize with outside systems.
- Calculate derived data during rendering, and use a key to reset state.
- Memoize after measuring, not before.
Sources
- React official documentation: Render and Commit — React documentation (Meta), 26 Oct 2026
- React official documentation: Rules of Hooks — React documentation (Meta), 26 Oct 2026
- React official documentation: You Might Not Need an Effect — React documentation (Meta), 26 Oct 2026
- React official site — React documentation (Meta), 26 Oct 2026
- React official documentation: Quick Start — React documentation (Meta), 26 Oct 2026
- React official documentation: Passing Props to a Component — React documentation (Meta), 26 Oct 2026
- React official documentation: Sharing State Between Components — React documentation (Meta), 26 Oct 2026
- React official documentation: input reference — React documentation (Meta), 26 Oct 2026
- React official documentation: Rendering Lists — React documentation (Meta), 26 Oct 2026
- React official documentation: useEffect reference — React documentation (Meta), 26 Oct 2026
- React official documentation: Passing Data Deeply with Context — React documentation (Meta), 26 Oct 2026
- React official documentation: strict mode reference — React documentation (Meta), 26 Oct 2026
- React official documentation: eslint-plugin-react-hooks — React documentation (Meta), 26 Oct 2026
- React official documentation: useRef reference — React documentation (Meta), 26 Oct 2026
- React official documentation: Reusing Logic with Custom Hooks — React documentation (Meta), 26 Oct 2026
- React official documentation: Component reference (error boundaries) — React documentation (Meta), 26 Oct 2026
- React official documentation: Server Components — React documentation (Meta), 26 Oct 2026
- React official documentation: useTransition reference — React documentation (Meta), 26 Oct 2026
- React v19 release post — React blog (Meta), 5 Dec 2024
