mediumFrontend

Explain the concept of reconciliation in React.

Q: Explain the concept of reconciliation in React.

**Core concept (TL;DR).** Reconciliation is the **diffing algorithm** React uses to compare the newly rendered element tree with the previous one and figure out the minimal DOM changes. To stay fast (roughly O(n)), it relies on two heuristics: elements of **different types** replace the whole subtree, and **keys** identify which list children moved. Heuristic diff: type changes & keys same type <tex

1.0k views

Understand the problem

This question checks the candidate's understanding of React's core algorithm for updating the UI efficiently.

virtual domreconciliationdiffingrendering

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Type change unmounts; same type preserves

import { useState } from "react";

function Box({ children }) {
  // input state lives in the DOM of this subtree
  return <div style={{ border: "1px solid #ccc", padding: 12 }}>{children}<input /></div>;
}

export default function App() {
  const [asSection, setAsSection] = useState(false);
  // Toggling the WRAPPER type (div ↔ section) changes the element type at this
  // position → React rebuilds the subtree and the <input> resets.
  const Wrapper = asSection ? "section" : "div";
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <Wrapper><Box>Type some text, then toggle:</Box></Wrapper>
      <button onClick={() => setAsSection((s) => !s)}>Toggle wrapper type</button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are render props and how do they work?

Describe the React component lifecycle.