Interview Q&A / React

1. What is the virtual DOM, and how does reconciliation work in React?

   The virtual DOM is React's lightweight description of what the UI should look like, made of plain JavaScript objects. On each update React compares the new description with the previous one (reconciliation) and changes only the parts of the real DOM that differ.

   BeginnerIn-depth4 min read
2. Why do keys matter when rendering lists in React?

   Keys tell React which list item is which between renders, so it can keep the right state with the right item when the list changes order, grows or shrinks.

   BeginnerIn-depth2 min read
3. What is the difference between React Server Components and Client Components?

   Server Components run only on the server, can read data directly and send no JavaScript for themselves to the browser. Client Components, marked with "use client", are also rendered to HTML first but then run in the browser, so they can use state, effects and event handlers.

   AdvancedIn-depth3 min read
4. What causes a React component to re-render?

   A component re-renders when its own state changes, when its parent re-renders, or when a context it reads changes. Changing a prop value does not itself trigger it; the parent re-rendering does. Plain variables and refs never cause a render.

   BeginnerQuick answer1 min read
5. What does React.StrictMode do?

   StrictMode is a development-only wrapper that helps find bugs. It renders components twice, re-runs effects once after mount and warns about deprecated APIs. It has no effect and no cost in production builds.

   BeginnerQuick answer1 min read
6. When does calling a state setter cause a re-render?

   React re-renders when the new state is different from the current one, compared with Object.is. Setting the same primitive value, or the very same object reference, usually skips the render. A new object with equal contents counts as different.

   IntermediateQuick answer1 min read