75 React Interview Questions and Answers for Developers

Use these React interview questions to practise explaining the fundamentals and applying them to small coding scenarios. The answers follow current React guidance: function components and Hooks are the default for new components, while class components remain relevant when maintaining older code.

React foundations and rendering

1. What is React used for?

React is a JavaScript library for building user interfaces from components. A component describes part of the interface, and React renders the component tree as data changes.

As an Amazon Associate I earn from qualifying purchases.

2. What is a React component?

A component is a reusable piece of UI. In modern React, it is usually a JavaScript function that returns markup written with JSX. Components can be composed to build larger interfaces.

3. What is JSX?

JSX is a syntax extension that lets you write markup-like expressions in JavaScript. It is commonly used in React components, though React can be used without JSX.

4. How do you put a JavaScript expression in JSX?

Use curly braces: <h1>Hello, {name}</h1>. The expression is evaluated as part of rendering. Curly braces accept expressions, not statements such as a standalone if block.

5. What is a Fragment?

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

6. How do you conditionally render UI?

Use normal JavaScript conditions. For example, {'{isReady ? : }'} chooses between two branches. Use && for a simple conditional element, taking care that a numeric left-hand value can itself render.

7. How do you render a list?

Transform an array into elements, commonly with map: {'{items.map(item =>

{item.name}

)}'}. Each sibling in the list needs a stable key.

8. Why do list items need keys?

A key lets React match an item with the corresponding element between renders, especially when items are inserted, removed, or reordered. Prefer a stable identifier from the data; an array index can misidentify items when the list changes.

9. What is component composition?

Composition means assembling an interface from smaller components that each have a clear responsibility. A parent can render child components and provide them with data or content.

10. How do you handle an event in React?

Pass a function to an event prop, such as <button onClick={handleClick}>Save</button>. Pass the function itself, rather than calling it during rendering, unless you deliberately need to create a wrapper function.

11. What does the children prop do?

children contains the content nested between a component’s opening and closing tags. A layout component can render that content inside a shared frame: <Panel><Profile /></Panel>.

12. What is a controlled input?

A controlled input gets its displayed value from React state and reports edits through an event handler. For example, set value={name} and update name in onChange. This gives the component control over the current field value.

13. How should a UI be rendered from data?

Keep the data in JavaScript values and map those values to components or elements. Avoid manually duplicating markup for repeated items; data-driven rendering makes updates and list changes easier to manage.

14. What does it mean that the UI is state-driven?

The rendered output is calculated from the current props and state. When state changes through React’s update mechanism, React renders the component again so the UI can reflect the new value.

15. Why should render logic be pure?

Rendering should calculate UI from its inputs without changing external values as a side effect. Pure render logic is easier to reason about because the same props and state produce the same result.

Props, state, and data flow

16. What is the difference between props and state?

Props are inputs supplied by a parent; state is a component’s own changing memory. Both are treated as snapshots for a render: do not mutate either directly. Use the relevant state update mechanism to request a change.

17. What is one-way data flow?

Data usually flows from a parent component to its children through props. A child can notify a parent about an event by calling a callback the parent passed down, but it should not directly modify the parent’s props.

18. When should you lift state up?

When sibling components need to coordinate around the same changing value, put that state in their nearest shared parent and pass the value and event handlers down as props.

19. What does it mean that state is a render snapshot?

A component’s state variable reflects the value for the current render. Calling a setter requests another render; it does not change the variable in code that is already executing. If a next value depends on the previous one, use an updater function.

20. When should you use a state updater function?

Use one when calculating the next state from the previous state: setCount(count => count + 1). This makes the update depend on the pending previous value rather than a potentially outdated value captured by the handler.

21. How do you update an object in state?

Create a new object instead of mutating the existing one. For a single field, a common pattern is setUser(user => ({ ...user, name: nextName })). Copying preserves the other fields while making the state change visible to React.

22. How do you update an array in state?

Use an operation that returns a new array. For example, append with setItems(items => [...items, newItem]); filter to remove an item. Do not call mutating methods such as push on the existing state array.

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

A derived value can be calculated from existing props or state, such as a filtered list. Usually calculate it during rendering rather than storing a second copy that can become out of sync.

24. Why avoid duplicated state?

If the same fact is stored in multiple places, every update must keep those copies consistent. Prefer one authoritative state value and derive other values from it where practical.

25. What is an uncontrolled input?

An uncontrolled input keeps its current value in the DOM rather than mirroring it in React state. A ref can read its value when needed. It can be suitable when the form does not need React to respond to every keystroke.

26. Controlled versus uncontrolled inputs: which should you choose?

Choose a controlled input when the UI must respond to each edit, validate as the user types, or keep the field synchronized with other state. An uncontrolled input can be simpler when the value is only needed at submission time. Avoid switching an input between the two approaches during its lifetime.

27. When should you use useReducer instead of useState?

Both are state Hooks. Use useState for straightforward values; consider useReducer when several related transitions are easier to express as actions handled in one reducer. Choose based on clarity, not an assumption that one is inherently faster.

28. What is a reducer?

A reducer is a function that receives the current state and an action and returns the next state. With useReducer, components dispatch actions to describe what happened, while the reducer centralizes how those actions change state.

Hooks and Effects

29. What are Hooks?

Hooks are functions that let function components use React features such as state, context, refs, and Effects. React also supports custom Hooks, which let developers reuse stateful logic.

30. What are the Rules of Hooks?

Call Hooks at the top level of a function component or custom Hook, not inside conditions, loops, nested functions, or event handlers. Call them in the same order on every render so React can associate Hook state consistently.

31. What does useState do?

useState adds a state value to a function component and returns that value with a setter. Calling the setter requests a render with the next state.

32. What does useReducer do?

useReducer manages state through a reducer function and a dispatch function. It is useful when related state changes can be described clearly as actions.

33. What does useContext do?

useContext reads a value from the nearest matching context provider above the component. Context can share values such as a theme across a subtree without passing them through every intermediate component.

34. What does useRef do?

useRef returns an object whose current property persists between renders. Updating that property does not itself trigger a render, so refs suit values needed by code but not used to display the UI.

35. What is a custom Hook?

A custom Hook is a JavaScript function whose name begins with use and that calls Hooks to reuse logic between components. It shares logic, not a single shared state instance: each call normally has its own state.

36. When should you not use an Effect?

Do not use an Effect merely to calculate a value from current props or state, or to handle a user event that belongs in its event handler. Calculate render-derived values during rendering; put event-specific work in the event handler.

37. What is useEffect for?

useEffect synchronizes a component with an external system, such as a subscription, browser API, or non-React widget. It is not a general-purpose place to put every calculation or piece of application logic.

38. How do Effect dependencies work?

The dependency list tells React which reactive values used by the Effect determine whether it needs to run again. Include the props, state, and component-scope values the Effect reads. An empty list means the Effect has no changing reactive dependencies; it is not a way to hide values the Effect uses.

39. Why does an Effect need cleanup?

Cleanup undoes or stops work established by an Effect, such as removing a listener or disconnecting a subscription. React runs cleanup before setting up the Effect again when dependencies change and when the component is removed.

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

Set up the subscription in an Effect and return a cleanup function that unsubscribes. Include the reactive values the subscription setup needs in the dependency list so it stays synchronized with the current component inputs.

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 later reads a captured value, it may see an older render’s value. Check the Effect dependencies and consider whether the work belongs in an event handler or needs a ref for a non-rendering value.

42. How do you synchronize with a browser API?

Use an Effect when the component must keep an external browser API in sync with current props or state. For example, an Effect can update a document-level setting and restore or clean up that setting when it no longer applies.

43. Should you use an Effect to filter a list?

Usually not. If the filtered list depends only on current items and a search term, calculate it during rendering. Storing it through an Effect adds another state update and can leave the UI briefly out of sync.

44. How can you avoid an infinite Effect loop?

Check whether the Effect updates state that changes one of its own dependencies. If it does, determine whether the state can be derived during rendering or whether the Effect is synchronizing with an external system as intended. Avoid removing a real dependency just to suppress reruns.

45. What does an Effect cleanup function return?

An Effect may return a function that cleans up the synchronization it established. For a subscription, that function unsubscribes; for a timer, it clears the timer. Do not return a Promise from an Effect as its cleanup.

Components, context, and refs

46. When is context useful?

Context is useful when many descendants need the same value and passing it through every intermediate component would make the component tree cumbersome. It is not a reason to put every piece of state in one global context.

47. How can you avoid unnecessary prop drilling?

First consider whether intermediate components can render passed content through children or another composition pattern. For values genuinely needed broadly within a subtree, context can be appropriate. Keep ordinary parent-to-child props when they make dependencies clear.

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

Changing state asks React to render again; changing ref.current does not. Use state for values that affect displayed output and a ref for a value that must persist but whose update should not itself change the UI.

49. How do you use a ref to access a DOM element?

Create a ref with useRef(null), pass it to an element’s ref prop, then access the DOM node through ref.current when appropriate, such as in an event handler or Effect.

50. What is an imperative escape hatch?

It is a way to perform an action directly when declarative rendering is not enough, such as focusing an input or controlling a browser API. Refs provide access for these cases; they should not replace state-driven rendering for ordinary UI changes.

51. Function components versus class components: what is the difference?

Function components use Hooks for state and other React features. Class components use class fields, methods such as setState, and lifecycle methods; Hooks do not run inside classes. React’s Component reference says, “We recommend defining components as functions instead of classes.”

52. How does state work in a class component?

A class stores state on this.state and requests updates with this.setState. Do not assign a new state value directly. In class components, object updates through setState are merged with the existing state object.

53. What are lifecycle methods?

Lifecycle methods are class-component methods React calls at stages such as mounting, updating, or unmounting. They remain important when reading older code; function components typically express external synchronization with Effects instead.

54. Can you use Hooks in a class component?

No. Hooks are called from function components or custom Hooks, not from class component methods. For an existing class, continue using its class APIs or refactor it to a function component before adopting Hooks.

55. When should a new component be a function?

For new components, follow React’s current recommendation to define components as functions. Learn class patterns as well when the job involves maintaining a codebase that uses them.

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

Quality, performance, and the current React ecosystem

56. What does component purity mean?

A pure component’s render result depends on its props and state, without mutating external values during rendering. This makes repeated rendering more predictable and helps React reason about UI updates.

57. How should you approach React performance problems?

Start by identifying the actual slow interaction or render, then use appropriate profiling tools to find the cause. Optimize the component or calculation that matters instead of adding memoization everywhere.

58. What is memoization in React?

Memoization can reuse a previous result or skip some work when relevant inputs have not changed. React provides APIs such as memo, useMemo, and useCallback; use them when they address a measured or clear problem, not as a universal requirement.

59. What is React DevTools used for?

React DevTools helps inspect a React component tree and investigate component props and state during development. It can help diagnose which part of an interface is behaving unexpectedly.

60. Why does accessibility matter in React?

React renders HTML, so accessible interface fundamentals still apply: use semantic elements, associate form labels with controls, provide keyboard access, and give meaningful images appropriate text alternatives. Prefer native HTML behavior over recreating it with generic elements.

61. What is an error boundary?

An error boundary is a React component pattern for showing fallback UI when errors occur while rendering part of a descendant tree. React’s class-component APIs remain relevant here; do not assume a regular function component can use a Hook to become an error boundary.

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

Client rendering builds or updates the UI in the browser. Server rendering produces HTML on a server so it can be sent to the browser; many applications then hydrate that HTML so React can attach client-side behavior. The exact setup depends on the framework and application architecture.

63. What is hydration?

Hydration is the process of attaching React’s client-side behavior to HTML that was already rendered on the server. The server output and client’s initial render need to agree for the interface to hydrate correctly.

64. What is React Compiler?

React Compiler is included in the current React documentation reference alongside React and React DOM. Its presence is a reason not to assume every component always needs hand-written memoization; follow the guidance for the project and its compiler setup.

65. Does every React app need manual memoization?

No. Memoization is a tool, not a blanket rule. Keep code simple unless profiling or a clear repeated computation or rendering cost justifies using a memoization API.

React interview scenarios and coding questions

66. How would you build a searchable list?

Keep the search text in state, derive the visible items from the current text and source data during rendering, and render each result with a stable key such as its ID. Do not add an Effect just to maintain a second filtered-list state.

67. How would you keep a form input controlled?

Initialize state to a string, set the input’s value from that state, and update it in onChange, for example setName(event.target.value). This keeps the displayed value and React state aligned.

68. Two sibling components need the same value. What do you do?

Move the value and its update logic into their nearest shared parent, then pass the value and the relevant handler to each sibling. Use context only when the value needs to reach a broader subtree and prop passing becomes cumbersome.

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

Use a ref if the timer ID is needed to clear or manage the timer but should not appear in the UI; changing the ID should not trigger a render. Use state for the visible timer value, such as seconds remaining.

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

Create the subscription in an Effect and return a cleanup function that removes the listener or unsubscribes. Include the reactive inputs the setup uses in the Effect dependency list.

71. Why did this component rerender?

Explain that a component may render again when its state changes, its parent renders and renders it, or a context value it reads changes. A render is not by itself proof that the DOM changed; React determines what needs updating.

72. What is wrong with calling a Hook conditionally?

Conditional Hook calls can change the order of Hooks between renders, so React may associate state with the wrong call. Move the Hook to the top level and put the condition inside the Hook’s logic or in the returned UI.

73. How would you remove a redundant Effect?

If an Effect copies props or state into another state value only to calculate what should render, remove that synchronization and calculate the value directly during rendering. Keep Effects for synchronization with external systems.

74. How would you add an item to an array in state?

Return a new array from the setter: setItems(items => [...items, newItem]). This avoids mutating the current state array and gives React a new state value to render.

75. Why might a codebase still use a class component?

It may be existing code that has not been migrated, or it may use class-specific patterns such as lifecycle methods or an error boundary. Be ready to explain how that code works, while using function components for new components in line with current React guidance.

Official React references

• React Quick Start and learning materials
• React reference overview
• Built-in React Hooks
• Rules of React
• The useEffect reference
• The class Component reference

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.