React interview questions & answers
React is a JavaScript library for building user interfaces from reusable, composable components. It uses a declarative model and a virtual DOM to efficiently update only the parts of the UI that change, and modern React manages state and side effects through hooks. Interviews focus on hooks, state and props, rendering, and performance.
Updated 2026-06-18 · 15 real, commonly-asked questions with answers.
Key takeaways
- React is a JavaScript library for building user interfaces from reusable, composable components.
- Core areas to revise for React: Components & JSX, Props & state, Hooks (useState, useEffect), Context & state management, Reconciliation & virtual DOM.
- This guide answers 15 of the most-asked React interview questions — rehearse them in OnJob's free AI mock interview.
Top 15 React interview questions
Q1.What is the virtual DOM and how does it work?
The virtual DOM is an in-memory representation of the real DOM that React keeps as a lightweight JavaScript object tree. When state changes, React builds a new virtual tree, diffs it against the previous one (reconciliation), and updates only the changed real DOM nodes. This minimizes expensive direct DOM manipulation and improves performance.
Q2.What is the difference between state and props?
Props are read-only inputs passed from a parent to a child component, configuring it from outside. State is data managed internally by a component that can change over time and triggers re-renders when updated. Props flow downward and are immutable to the receiver, while state is local and owned by the component.
Q3.What is the useState hook?
useState lets a function component hold local state. It returns an array with the current value and a setter function. Calling the setter schedules a re-render with the new value; updates may be batched and should use the functional form when based on previous state.
Q4.What is the useEffect hook used for?
useEffect runs side effects after render, such as data fetching, subscriptions, timers, or manual DOM updates. Its dependency array controls when it re-runs: empty means once after mount, listed values mean re-run when they change, and omitted means after every render. Returning a function from it performs cleanup before the next run or on unmount.
Q5.What are the Rules of Hooks?
Hooks must be called only at the top level of a component or custom hook, never inside loops, conditions, or nested functions, so their call order stays consistent across renders. They may only be called from React function components or other hooks. These rules let React reliably associate state with each hook call.
Q6.What are keys in React and why are they important?
Keys are unique identifiers given to elements in a list to help React track which items changed, were added, or removed during reconciliation. Stable, unique keys like database IDs let React update efficiently and preserve component state. Using array indexes as keys can cause bugs when the list reorders or items are inserted.
Q7.What is the difference between controlled and uncontrolled components?
A controlled component has its form value driven by React state and updated via onChange, making React the single source of truth. An uncontrolled component lets the DOM hold the value, which you read with a ref when needed. Controlled inputs are preferred for validation and dynamic behavior.
Q8.What is useMemo and useCallback?
useMemo caches the result of an expensive calculation and recomputes it only when its dependencies change. useCallback caches a function reference so it stays stable across renders unless its dependencies change. Both are optimizations to avoid unnecessary recomputation or re-renders, especially with memoized children.
Q9.What is React.memo?
React.memo is a higher-order component that memoizes a function component, skipping re-render if its props are unchanged by a shallow comparison. It helps avoid wasted renders for pure presentational components. It is only worthwhile when the component renders often with the same props or is costly to render.
Q10.What is the Context API?
The Context API lets you share values like theme, locale, or the current user across the component tree without passing props through every level. You create a context, wrap part of the tree in its Provider, and consume the value with useContext. It is best for low-frequency global data, not high-frequency updates.
Q11.What is JSX?
JSX is a syntax extension that lets you write HTML-like markup directly in JavaScript, which compilers like Babel transform into React.createElement calls. It makes component structure readable and expressive. Because it is JavaScript, you embed expressions with curly braces and use className instead of class.
Q12.What is the difference between a class component and a function component?
Class components are ES6 classes that extend React.Component, hold state in this.state, and use lifecycle methods. Function components are plain functions that, with hooks, can now manage state and side effects too. Modern React favors function components with hooks for simpler, more reusable code.
Q13.How do you lift state up in React?
Lifting state up means moving shared state to the closest common ancestor of the components that need it, then passing it down via props along with updater callbacks. This keeps a single source of truth and lets sibling components stay in sync. It is the standard pattern before reaching for context or external state libraries.
Q14.What is the useReducer hook and when would you use it?
useReducer manages state via a reducer function that takes the current state and an action and returns the next state, similar to Redux. It returns the current state and a dispatch function. It is preferable to useState when state logic is complex, involves multiple sub-values, or the next state depends intricately on the previous one.
Q15.What are custom hooks?
Custom hooks are functions whose names start with use and that call other hooks to extract and reuse stateful logic across components. For example, a useFetch hook could encapsulate data-fetching state. They promote code reuse without changing the component hierarchy.
More interview topics
Practise & prepare
Practise React out loud
Reading answers is step one. Rehearse them in OnJob's free AI mock interview, get instant feedback, then apply to AI-matched jobs in one click.