React interview questions, with clear answers

React is a JavaScript library for building user interfaces out of components — reusable pieces that each manage their own markup, logic and state. You describe what the UI should look like for the current data, and React updates the page when the data changes.

The benefits: reusable components, a predictable one-way flow of data, a very large ecosystem, and the same way of working on mobile through React Native.

The virtual DOM is a lightweight description of the UI that React keeps in memory. When state changes, React builds a new description, compares it with the previous one — reconciliation, or "diffing" — and applies only the necessary changes to the real DOM, which is the slow part.

To keep the comparison fast, React assumes that elements of different types produce different trees, and it uses keys to match list items between renders.

Props are inputs passed from a parent component to a child; the child treats them as read-only. State is data a component owns and can change over time with useState, and changing it re-renders the component.

When two components need the same data, keep it as state in their nearest common parent and pass it down to both as props — this is called lifting state up.

Hooks are functions that let function components use React features: useState for state, useEffect for side effects, plus useContext, useRef, useMemo, useCallback and your own custom hooks.

There are two rules. Call hooks only at the top level of a component or a custom hook — never inside loops, conditions or nested functions — and call them only from React functions. React relies on hooks being called in the same order on every render.

useEffect runs side effects — fetching data, subscriptions, timers, manual DOM changes — after React has updated the screen. The dependency array controls when it runs again: with no array it runs after every render; with [] it runs once after the first render; with [a, b] it runs whenever a or b changes.

Return a clean-up function to undo the effect:

useEffect(() => {
  const id = setInterval(() => setSeconds((s) => s + 1), 1000)
  return () => clearInterval(id)   // on unmount, or before the effect runs again
}, [])

Leaving out a dependency causes stale values, so list everything the effect reads.

Keys tell React which item is which between renders, so it can update, move or remove the right elements. Use a stable, unique ID from your data, such as key={user.id}.

Using the array index as the key breaks when items are inserted, removed or reordered: React may reuse the wrong component, which shows up as inputs keeping the wrong values and as wasted re-renders.

In a controlled component, React state holds the input's value, and every change goes through an onChange handler:

const [email, setEmail] = useState('')

<input value={email} onChange={(e) => setEmail(e.target.value)} />

In an uncontrolled component, the DOM keeps the value and you read it when you need it, using a ref. Controlled inputs make validation and conditional UI easy; uncontrolled ones are simpler for very basic forms and for file inputs.

Prop drilling is passing data down through several layers of components that don't use it, just so a deeply nested child can get it. Context lets a provider make a value available to every component below it, and any of them can read it with useContext — useful for things like the signed-in user, the theme or the language.

Context isn't a full state manager: every consumer re-renders when the context value changes, so keep fast-changing data out of a large shared context, or split it into smaller ones.

Both cache something between renders until their dependencies change. useMemo caches the result of a calculation: const sorted = useMemo(() => sortItems(items), [items]). useCallback caches the function itself: const onSave = useCallback(() => save(id), [id]), so a memoised child that receives it as a prop doesn't re-render needlessly.

Use them when a calculation is genuinely expensive, or when a stable reference matters. Wrapping everything in them adds cost without benefit.

React.memo wraps a component so that it skips re-rendering when its props are shallowly equal to the props from the last render. It helps components that render often with the same props, such as rows in a long list.

It only works if the props really are stable — a new object or function passed on every render defeats it, which is where useMemo and useCallback come in.

The basic approach is to fetch inside useEffect, keep the result in state, and handle loading and error states:

useEffect(() => {
  let cancelled = false
  fetch(`/api/users/${id}`)
    .then((r) => r.json())
    .then((data) => { if (!cancelled) setUser(data) })
    .catch(() => { if (!cancelled) setError(true) })
  return () => { cancelled = true }   // ignore a late response for an old id
}, [id])

In real applications, libraries such as TanStack Query or SWR take care of caching, retries and race conditions, and frameworks such as Next.js can fetch on the server.

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. A build tool compiles it into function calls that create React elements, so <h1 className="title">Hi</h1> becomes a call that creates an h1 element with those props and children.

The main differences from HTML: className instead of class, htmlFor instead of for, camelCase event handlers like onClick, and curly braces {} for JavaScript expressions.

Class components extend React.Component, keep their state in this.state and use lifecycle methods such as componentDidMount. Function components are plain functions that use hooks for state and side effects.

Function components are now the standard: they're shorter, easier to test, and custom hooks make their logic easy to reuse. You'll still meet classes in older code, and error boundaries are still written as classes.

You attach handlers with camelCase props such as onClick and onChange. React passes your handler a synthetic event — a cross-browser wrapper around the native event with the same interface, including e.preventDefault() and e.target. Since React 17, React listens at the root element of your app rather than on document.

Pass a function, not a call: onClick={handleClick}, or onClick={() => remove(id)} when you need to pass arguments.

A fragment (<>...</>, or <Fragment key={...}> in a list) groups several elements without adding an extra node to the DOM — useful when a component has to return siblings, such as table cells.

A portal (createPortal(child, domNode)) renders a child into a different part of the DOM — typically modals, tooltips and toasts — so it isn't clipped by a parent's overflow or stacking, while its events still bubble through the React tree as usual.

Measure first, with the Profiler in React DevTools, to see what re-renders and why. Then:

• Keep state as close as possible to where it's used, so an update doesn't re-render the whole tree.
• Memoise expensive children with React.memo, useMemo and useCallback.
• Virtualise long lists, so only the visible rows are rendered.
• Split the code with React.lazy and Suspense, so each page loads only what it needs.
• Avoid recreating heavy objects on every render.

Network requests and bundle size often matter more than rendering speed, so check those as well.