React Interview Questions and Answers: 75 Concepts and Examples

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

These 75 React interview questions and answers cover component fundamentals, rendering, props and state, Hooks, effects, performance, and practical coding decisions. The examples use function components for new code; class-component questions focus on patterns you may encounter in existing applications.

React foundations and rendering

1. What is React used for?

React is a JavaScript library for building user interfaces from components. You describe the interface for a given set of data, and React updates the rendered UI as that data changes. Its Quick Start introduces many concepts used in everyday React work.

2. What is a React component?

A component is a reusable piece of interface. In modern React, it is commonly a JavaScript function that returns markup written with JSX.

function Welcome() {
  return <h1>Welcome</h1>;
}

3. What is JSX?

JSX is a syntax extension that lets you write markup-like expressions in JavaScript. It is commonly used to describe React elements; build tools transform it into JavaScript that React can process.

4. How do you embed JavaScript expressions in JSX?

Use curly braces inside JSX to evaluate a JavaScript expression. For example, <p>Hello, {name}</p> renders the current value of name. Curly braces accept expressions, not statements such as a standalone if.

5. What is a Fragment?

A Fragment groups multiple JSX elements without adding an extra DOM wrapper. Use <>...</> for a simple group, or <Fragment key={id}> when the Fragment itself needs a key in a list.

6. How do you conditionally render content?

Use ordinary JavaScript conditional expressions, such as an if before the return, a ternary inside JSX, or && when one branch should render nothing. Choose an expression that makes the empty case clear; for example, a numeric value of 0 on the left side of && can render as visible text.

7. How do you render a list?

Use JavaScript’s map to turn data into elements. Give each element a key that identifies it among its siblings.

{items.map(item => <li key={item.id}>{item.name}</li>)}

8. Why are keys important in React?

Keys help React match list items between renders, especially when items are inserted, removed, or reordered. Use a stable identifier from the data where possible; an array index can misidentify items when the list order or membership changes.

9. What is component composition?

Composition means building a larger interface by combining smaller components. It lets components focus on their own responsibilities while parent components arrange them into a page or feature.

10. How do you handle events in React?

Pass a function as an event prop, such as onClick. React calls it when the event occurs; pass the function itself rather than invoking it during rendering.

11. How do you pass content to a component?

Place the content between a component’s opening and closing tags. React makes that content available through the children prop, which is useful for generic wrappers such as panels or dialogs.

12. What is a controlled input?

A controlled input gets its current value from React state and updates that state in an event handler. The rendered value therefore follows the application state.

const [name, setName] = useState("");
<input value={name} onChange={event => setName(event.target.value)} />

13. How should a UI be rendered from data?

Keep the data in props or state and use JavaScript expressions to describe the corresponding elements. This makes the rendered interface a reflection of the current data rather than a collection of manual DOM edits.

14. What does it mean for a UI to be state-driven?

It means that React renders the interface from current props and state. When state changes through its update mechanism, React renders again so the UI can reflect the new value.

15. Why should components be pure during rendering?

A pure render produces the same JSX for the same inputs and does not change values outside the component as a side effect. Purity makes rendering more predictable and lets React safely render components as needed. React’s Rules of React describe this expectation.

Props, state, and data flow

16. What is the difference between props and state?

Props are values supplied to a component by its parent; state is component memory that can change over time. Both are read as snapshots during a render. Treat them as immutable and use the appropriate state update mechanism to request a change.

17. What is one-way data flow?

In the usual React model, data flows from a parent to its children through props. A child that needs to influence parent-owned data can call a callback passed down by the parent.

18. What does lifting state up mean?

Lifting state up means moving shared state to the closest common parent of components that need it. The parent can pass the value and update callbacks to each child, keeping their views coordinated.

19. What is a state snapshot?

Each render sees the state values for that particular render. Calling a state setter requests a future render; it does not change the state variable already captured by the current event handler.

20. When should you use a functional state update?

Use the updater form when the next value depends on the previous value, particularly when several updates may be queued. For example, setCount(count => count + 1) calculates from the latest queued state.

21. How do you update an object in state?

Create a new object rather than mutating the existing state object. Spread the previous object and replace the field that changed, as in setUser(user => ({ ...user, name: nextName })).

22. How do you update an array in state?

Create a new array using methods such as map, filter, or spread syntax. For example, setItems(items => items.filter(item => item.id !== removedId)) produces a new array without the removed item.

23. What is derived state, and should you store it?

Derived state is a value that can be calculated from existing props or state. If it can be computed during rendering, calculate it there instead of storing a duplicate that could become inconsistent.

24. How can you avoid duplicated state?

Choose one authoritative value and derive other display values from it. For example, store a list and a search query, then compute the filtered list rather than maintaining a separate filtered-list state that must be synchronized.

25. What is the difference between controlled and uncontrolled form inputs?

A controlled input gets its value from React state and reports changes through an event handler. An uncontrolled input keeps its current value in the DOM; a ref can read it when needed. Choose based on whether the UI needs to respond to each change or can read the value at a later point.

26. When does useReducer help?

useReducer can make state transitions easier to reason about when several related updates are driven by actions. A reducer receives the current state and an action and returns the next state. For simpler, independent values, useState may be more straightforward.

27. Does React state update immediately?

A setter schedules an update; the current render’s variable remains unchanged. Code that needs the next value should calculate it explicitly or use an updater function rather than expecting the current variable to change in place.

28. How can a child update state owned by a parent?

The parent passes a callback as a prop, and the child calls it in response to an event. The parent then updates its own state and passes the resulting value back down.

Hooks and effects

29. What are React Hooks?

Hooks are functions that let function components use React features such as state, context, refs, and effects. The React reference lists built-in Hooks and their purposes.

30. What are the Rules of Hooks?

Call Hooks at the top level of a function component or a custom Hook, not inside loops, conditions, or nested functions. This keeps Hook calls in the same order between renders. Do not call Hooks from ordinary JavaScript functions or class components.

31. What does useState do?

useState adds a state value to a function component and returns that value along with a setter. The setter requests a render with the new state.

32. What does useReducer do?

useReducer manages state by applying actions through a reducer function. It is useful when related state changes benefit from being expressed as named transitions rather than separate setter calls.

33. What does useContext do?

useContext reads a context value provided by a matching provider higher in the component tree. Context can carry values such as a theme or locale through many levels without explicitly passing the same prop at each level.

34. What does useRef do?

useRef returns a persistent object whose current property can hold a value between renders. Changing it does not itself trigger a render, so it is appropriate for values such as a timer identifier that do not determine the displayed UI.

35. What is a custom Hook?

A custom Hook is a JavaScript function whose name begins with use and that calls Hooks to share reusable stateful logic. It shares logic, not one shared state instance: each component calling it has its own Hook state unless state is shared through another mechanism.

36. When should you not use an Effect?

Do not use an Effect just to calculate a value from current props or state, or to handle a user event. Compute derived values during rendering and put event-specific work in the event handler. Effects are for synchronizing with systems outside React.

37. What is useEffect for?

useEffect synchronizes a component with an external system, such as a subscription, browser API, or network connection. It is not a general-purpose place for all logic. See the official useEffect reference.

38. What are Effect dependencies?

The dependency list tells React which reactive values used by an Effect should cause it to resynchronize. Include the props, state, and component-local values the Effect reads; do not omit a dependency merely to suppress reruns.

39. How do you clean up an Effect?

Return a cleanup function from the Effect. React runs it before the Effect resynchronizes and when the component is removed, which lets you unsubscribe, disconnect, or clear a resource set up by that Effect.

40. How do you subscribe to an external event source?

Set up the subscription in an Effect and return a cleanup function that removes the same listener or unsubscribes. Keep setup and teardown paired so changes to dependencies do not leave stale subscriptions behind.

41. What is a stale closure in React?

A closure captures values from the render in which it was created. If an asynchronous callback or long-lived subscription uses that closure later, it may read an older value; review the Effect dependencies and subscription lifecycle when debugging.

42. Where should render calculations go?

If a calculation depends only on current props and state, perform it during rendering. This avoids an extra state variable and an Effect whose only job is to keep that variable synchronized.

43. Can you call Hooks conditionally?

No. Conditional Hook calls can change the order of Hooks between renders. Put the condition inside the Hook’s logic or split the conditional UI into separate components that each call Hooks consistently.

44. How should an Effect respond to changing values?

List the reactive values it reads as dependencies so React can synchronize it with the current inputs. If a dependency causes unwanted resynchronization, reconsider the Effect’s design rather than hiding the dependency.

45. Are Effects the right place to respond to a button click?

Usually not. Put work caused directly by a click in the click handler; reserve an Effect for keeping an external system synchronized with the component’s rendered state.

Components, context, and refs

46. When should you use context?

Use context when a value is needed by many descendants across the tree, such as a theme or locale. For a value used by only a nearby child, ordinary props often make the data flow clearer.

47. What is prop drilling, and when is it a problem?

Prop drilling is passing a value through intermediate components that do not use it, solely so a deeper component can receive it. It becomes a maintenance concern when it obscures ownership or makes many component interfaces carry unrelated data; context is one option when the value is broadly needed.

48. What is the difference between a ref and state?

State updates participate in rendering; changing a ref’s current value does not trigger a render. Use state for values that affect what the user sees and refs for persistent values that are not themselves part of the rendered output.

49. How do you access a DOM element with a ref?

Create a ref with useRef(null) and pass it to a DOM element’s ref prop. After React attaches the element, access it through ref.current for a focused imperative task such as focusing an input.

50. What is an imperative escape hatch?

It is a way to perform a specific operation that is naturally imperative, such as focusing a DOM node or integrating with a non-React widget. Keep such operations narrow; the normal approach is to describe UI from state and props.

51. What is the difference between function and class components?

Function components use Hooks for state and effects; class components use instance state and lifecycle methods. React recommends defining components as functions, while class knowledge remains useful for understanding and maintaining existing code.

52. How does state work in a class component?

A class component stores state on this.state and requests updates with this.setState. Do not mutate the state object directly; an update should go through the class state API.

53. What is setState in a class component?

setState schedules an update to a class component’s state. When the next value depends on the previous state, use the updater form so the calculation uses the appropriate prior state.

54. How do lifecycle methods relate to existing class components?

Lifecycle methods run at points in a class component’s existence, such as mounting, updating, and unmounting. In legacy code, methods such as componentDidMount and componentWillUnmount often pair setup with cleanup; function components express synchronization with Effects instead.

55. Can class components use Hooks?

No. Hooks are for function components and custom Hooks, not class components. A class can still render function components that use Hooks.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Quality, performance, and React’s ecosystem

56. What is a pure component?

A pure component’s render output depends on its inputs, and rendering does not cause side effects. This makes it easier to reason about UI changes and supports React’s rendering model.

57. How should you approach React performance work?

First identify a real performance problem, then determine what work is costly and why it repeats. Avoid adding memoization everywhere as a default; it adds complexity and is useful only when it addresses a measured or clearly understood issue.

58. What is memoization?

Memoization reuses a prior result or rendered output when relevant inputs have not changed. React provides memoization tools, but whether they help depends on the component, its inputs, and the surrounding workload.

59. What is React DevTools used for?

React DevTools is a debugging aid for inspecting React applications and their component behavior. Use it to investigate what is rendering and where state or props originate rather than guessing from the UI alone.

60. Why does accessibility matter in React?

React ultimately renders HTML that people use with keyboards, screen readers, and other assistive technologies. Prefer semantic elements, associate form labels with inputs, and ensure interactive controls can be operated accessibly.

61. What is an error boundary?

An error boundary is a component pattern for handling certain errors thrown while rendering descendants and showing fallback UI. Error boundaries are implemented with class components; they do not catch every kind of error, such as errors from ordinary event handlers.

62. What is the difference between client and server rendering?

Client rendering runs React in the browser to produce or update the UI. Server rendering generates HTML on a server, and a client may hydrate that HTML to make it interactive. The details depend on the application’s framework and rendering setup.

63. What is hydration?

Hydration is the process by which React attaches client-side behavior to HTML that was rendered on the server. The server output and client’s initial render need to agree for hydration to proceed as intended.

64. What is React Compiler?

React Compiler is part of the current React documentation’s ecosystem and concerns optimization of React code. Its presence does not mean every project has it configured or that developers should ignore application-specific performance issues; consult the project’s tooling and current React guidance.

65. Does React require manual memoization?

Not as a universal rule. Whether manual memoization is appropriate depends on the application and its performance needs; React’s reference includes React Compiler alongside the broader React APIs, so older advice that every component needs manual memoization should not be treated as universal.

React interview scenarios and coding questions

66. How would you build a searchable list?

Keep the query in state, derive the matching items during render, and map them with stable keys.

const [query, setQuery] = useState("");
const visibleItems = items.filter(item =>
  item.name.toLowerCase().includes(query.toLowerCase())
);
return (
  <>
    <input value={query} onChange={event => setQuery(event.target.value)} />
    <ul>{visibleItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>
  </>
);

67. How would you keep a form input controlled?

Initialize state with a suitable value, pass it as the input’s value, and update it in onChange. For text inputs, an empty string is a common initial value.

68. How would you share state between two sibling components?

Move the state into their nearest common parent, then pass the value and the needed callbacks down as props. This gives both siblings the same source of truth.

69. Should a timer ID go in state or a ref?

Use a ref if the ID is only needed to clear or inspect the timer and does not affect rendered output. Use state only if the value itself should change what the component displays.

70. How would you subscribe to an external event source and clean it up?

Use an Effect to register the listener and return cleanup that unregisters it.

useEffect(() => {
  function handleEvent(event) {
    // Synchronize the component with the event source.
  }
  source.addEventListener("change", handleEvent);
  return () => source.removeEventListener("change", handleEvent);
}, [source]);

71. Why did a component rerender?

Check whether its own state changed, its parent rendered and supplied new props, or a context value it reads changed. Use React DevTools to inspect the component tree and investigate the actual update path.

72. How do you diagnose a Hook called conditionally?

Move the Hook call to the component’s top level, then place the condition inside the Effect or other Hook logic. Alternatively, split the conditional branch into a separate component with its own consistent Hook calls.

73. How do you remove a redundant Effect?

If the Effect only copies props or state into another state variable, remove that duplicate state and calculate the value during rendering. If the work is caused by a user action, move it into that action’s event handler.

74. How would you remove an item from an array in state?

Filter into a new array and pass it to the setter; do not mutate the existing array.

setItems(items => items.filter(item => item.id !== idToRemove));

75. When might a class component still appear in a codebase?

You may encounter one in an existing application that uses class state, lifecycle methods, or an error boundary. Understanding those patterns helps with maintenance, even though current React guidance recommends functions for new components.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.