React Interview Questions
React interviews almost always start with the fundamentals before moving on to architecture and performance. Interviewers want to see that you understand how components compose, how data flows through props and state, when effects run, and why React re-renders. This curated set of 24 question-and-answer pairs covers the core ground with concise, modern (React 18/19) answers and short code where it helps.
Components and props
What is a React component?
A component is a function that returns JSX describing a piece of UI. It receives inputs (props) and produces output that React renders to the DOM. Modern React uses function components exclusively.
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}What are props and can a component change its own props?
Props are read-only inputs passed from a parent. A component must never mutate its props; data flows one way, top-down. To change displayed data, the parent updates state and passes new props on the next render.
How do you pass content between a component’s tags?
Through the special children prop. Anything nested inside the component’s JSX arrives as props.children.
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card><p>Body text</p></Card>;What is the difference between props and state?
Props are passed in from outside and are immutable within the component. State is owned and managed internally and can change over time, triggering a re-render. Props flow down; state lives local.
How do you set default values for props?
Use default parameter values when destructuring, which is the idiomatic approach for function components.
function Button({ variant = "primary", children }) {
return <button className={variant}>{children}</button>;
}State and events
How do you declare state in a function component?
With the useState Hook, which returns the current value and a setter.
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Why is state updated with a function instead of assignment?
Calling setState schedules a re-render with the new value; React owns the variable. Direct assignment would mutate a local that React never reads, so the UI would not update.
When should you use the updater function form of a setter?
When the next value depends on the previous one. State updates are batched, so reading the variable directly can use a stale value. The function form always receives the latest state.
setCount(prev => prev + 1);How do you handle events in React?
Attach camelCased handlers like onClick or onChange that receive a synthetic event. Pass a function reference, not a call.
<input onChange={(e) => setText(e.target.value)} />Common mistake: writing
onClick={handleClick()}calls the function during render. PassonClick={handleClick}instead.
How do you update an object or array in state?
Create a new copy rather than mutating the existing one, so React detects the change by reference.
setUser(prev => ({ ...prev, name: "Ada" }));
setItems(prev => [...prev, newItem]);Hooks
What rules govern Hooks?
Call Hooks only at the top level of a component or another Hook, never inside loops, conditions, or nested functions. This keeps the call order stable across renders so React can match each Hook to its state.
What does useEffect do and when does it run?
useEffect runs side effects (data fetching, subscriptions, manual DOM work) after the render is committed. It runs after every render by default, or only when listed dependencies change.
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);How do you clean up an effect?
Return a cleanup function. React runs it before the next effect and on unmount.
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);What is the difference between useMemo and useCallback?
useMemo memoizes a computed value; useCallback memoizes a function identity. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
When would you reach for useReducer over useState?
When state logic is complex, has multiple sub-values, or the next state depends on the previous in several ways. A reducer centralizes transitions and makes them testable.
How do you share logic between components?
Extract a custom Hook, a function whose name starts with use that calls other Hooks. It reuses stateful behavior without sharing state itself.
function useToggle(initial = false) {
const [on, setOn] = useState(initial);
return [on, () => setOn(o => !o)];
}Rendering
What causes a component to re-render?
A state change, a new prop value, a context value change, or a parent re-rendering. React then reconciles the new output against the previous tree.
What is the virtual DOM and reconciliation?
The virtual DOM is a lightweight in-memory representation of the UI. On each render React diffs the new tree against the old one (reconciliation) and applies only the minimal real-DOM changes.
How does React.memo help performance?
It memoizes a component so it skips re-rendering when its props are shallowly equal to the previous render. Useful for expensive children that receive stable props.
What is the difference between controlled and uncontrolled inputs?
A controlled input’s value is driven by React state via value and onChange. An uncontrolled input keeps its own value in the DOM, read through a ref. Controlled is preferred for validation and predictable state.
Keys and lists
Why does React require a key when rendering lists?
Keys give each list item a stable identity so React can match items across renders, preserving state and minimizing DOM operations during reconciliation.
{users.map(u => <li key={u.id}>{u.name}</li>)}Why is the array index a poor key?
When items are reordered, inserted, or removed, indices shift. React then associates the wrong state with the wrong element, causing subtle bugs. Use a stable unique id.
Do keys need to be globally unique?
No. Keys only need to be unique among siblings in the same list, not across the whole app.
Best practices
- Keep components small and focused; lift state only as high as it needs to go.
- Treat props and state as immutable; always produce new objects and arrays.
- List every reactive value an effect reads in its dependency array.
- Prefer derived values during render over storing duplicate state.
- Use stable, unique keys from your data, never the array index for dynamic lists.
- Reach for
useMemo,useCallback, andReact.memoonly after profiling shows a real cost.
Interview tip: when asked “why does this re-render,” answer in terms of the trigger (state, props, context, parent) and then reconciliation. Narrating React’s data flow out loud signals senior-level understanding far more than reciting API names.