Reconciliation is the process [React](/courses/reactjs) uses to determine how the previously rendered UI should be updated to match the newly rendered UI. The comparison performed during this process is commonly described as **diffing**. ### Basic Mental Model ```text Previous rendered tree + New rendered tree ↓ reconciliation ↓ Determine differences ↓ Commit necessary changes ``` ### Example: Same Element Type Previous render: ```jsx

React

``` Next render: ```jsx

React

``` The element type is still: ```text h1 ``` [React](/courses/reactjs) can keep the existing DOM element and update the changed property: ```text className light → dark ``` ### Example: Text Changes Previous: ```jsx

``` Next: ```jsx

Loaded

``` The `p` element still represents the same position and type. React can update its text instead of replacing an unrelated section of the page. ### What Happens When the Element Type Changes? Suppose the previous result is: ```jsx

``` and the next result is: ```jsx

``` The root element at that position changed from: ```text section ``` to: ```text main ``` React treats this as a different element identity at that position and replaces the corresponding subtree rather than trying to reuse the old `section` as a `main`. ### Component Type Also Matters Consider: ```jsx ``` changing to: ```jsx ``` These are different component types. React treats the new component as different rather than preserving the previous component instance as though it were the same thing. Conceptually: ```text Profile ↓ removed Settings ↓ new component instance ``` State belonging to the removed component is normally discarded. ### Same Component Type Can Preserve Identity Suppose: ```jsx ``` changes to: ```jsx ``` The component type remains `Profile` at the same position. React can preserve the component instance while rendering it with new props. ### Reconciliation Uses Identity, Not Just Visual Similarity Two pieces of UI may look almost identical but still represent different component identities. React uses information such as: ```text Component/element type Position in the tree Keys for lists or explicit identity ``` to determine whether something should be preserved or replaced. ### Diffing Is Not Simply Comparing HTML Strings React is not doing something like: ```javascript oldHTML === newHTML ``` It understands the structure of the React element/component tree and reconciles that structure. ### Why Reconciliation Matters Reconciliation helps React preserve things that should remain stable, including: ```text DOM nodes Component state Input state Component identity ``` while replacing things that genuinely represent different UI. ### Interview-Ready Answer Reconciliation is React's process for comparing the previous rendered tree with the next one and determining the changes needed to update the UI. This comparison is commonly called diffing. React considers element or component type, position, and keys when deciding whether to preserve an existing component or replace it with a new one.