React Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

React · Junior

1. What is React?

   Correct answer: A library for building user interfaces out of components

   React is responsible only for the UI: it describes the interface as a function of state and updates the DOM efficiently. Routing, data loading and the rest come from libraries (React Router, TanStack Query) or frameworks built on React (Next.js). JSX is a JavaScript syntax extension, not a separate language.

2. What is the virtual DOM in React?

   Correct answer: A JS description of the UI: React diffs it with the previous one and applies only the difference

   When rendering, components return a tree of React elements - plain JS objects. React compares the new tree with the previous one (reconciliation) and applies minimal changes to the real DOM. It isn't a browser API or a copy of the browser.

3. What does JSX turn into at build time?

   Correct answer: Function calls that create React elements (jsx())

   <h1 className="t">Hi</h1> is compiled (by Babel, SWC, TypeScript) into a call like jsx("h1", { className: "t", children: "Hi" }), which returns a description object. Browsers don't understand JSX, and React doesn't use innerHTML - that's why strings in JSX are escaped automatically.

4. How do you set a CSS class on an element in JSX?

   Correct answer: <div className="box">

   JSX is closer to JavaScript, and class is a reserved word, so attributes are named like DOM properties: className, htmlFor instead of for, tabIndex, onClick. data-* and aria-* attributes are written as in HTML.

React · Middle

1. When does React preserve a component's state between renders?

   Correct answer: As long as the same component type stays at the same position

   State is tied to a position in the UI tree, not to a variable. If a different type renders in the same place (<input> instead of <textarea>, another component), the subtree is recreated and state is lost. That's why you must not declare components inside other components: each render creates a new type.

2. How do you reset the state of <EditForm /> when switching to another user?

   Correct answer: Pass key={userId} - React recreates the component

   A new key tells React it's a different component: the old one unmounts along with its state, and a new one mounts. Resetting via an effect works, but first renders stale data and then fixes it - an extra render and flicker. forceUpdate exists only on classes and doesn't reset state.

3. What does React.memo(Component) do?

   Correct answer: Skips rendering if props are shallowly equal to the previous ones

   memo compares each prop with Object.is. If all are equal, the previous render result is reused. Changes to its own state and context still trigger a render. You can pass a custom comparison function as the second argument.

4. Why doesn't memo help <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?

   Correct answer: The callback and the style object are recreated on every render

   An inline function and an object literal are new references on every render, so shallow comparison won't let them through. Stabilize them with useCallback / useMemo, or move constants outside the component. The React Compiler does this automatically.

React · Senior

1. Why is React's cache() useful in Server Components?

   Correct answer: It deduplicates calls with the same arguments within a single request

   const getUser = cache(async (id) => db.user.find(id)) - several components in one server render can call getUser(1), and the database query runs once. The cache lives only within the request, so different users' data doesn't mix. Cross-request caching in Next.js is done with 'use cache'.

2. What is Fiber in React?

   Correct answer: The reconciler architecture: rendering is split into interruptible units of work

   Fiber (React 16+) represents each tree node as a "fiber" object with information about its work. This makes it possible to pause, interrupt and prioritize rendering and reuse work - the foundation of concurrent features (transitions, Suspense). The old stack reconciler walked the tree recursively and couldn't stop.

3. How does the render phase differ from the commit phase?

   Correct answer: Render is interruptible and can repeat; commit synchronously applies changes to the DOM

   In the render phase, React calls components and computes the diff - it can be interrupted, discarded and restarted, which is why rendering must be pure. In the commit phase, changes are applied to the DOM all at once without interruption, then layout effects run, and after painting - regular effects.

4. What does concurrent rendering give the user?

   Correct answer: Urgent updates (typing) can interrupt a heavy non-urgent render

   Concurrent doesn't mean multithreaded: JS still runs on one thread. React can prepare several versions of the UI, yield control to the browser and interrupt lower-priority work (transitions) for urgent work. It kicks in when you use startTransition, useDeferredValue and Suspense.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.