Suggest an editImprove this articleRefine the answer for “How does React determine which components need to be updated?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**React** does not update the whole UI, only the components whose props, state, or context changed. **Key point:** to figure this out, React uses its own reconciliation algorithm, comparing the new and old Virtual DOM tree.Shown above the full answer for quick recall.Answer (EN)Image## Key idea > React **does not update the whole UI**, only **the components** whose **props**, **state**, or **context** changed. > > To figure this out, React uses its own **reconciliation algorithm**. --- ## 1. What triggers an update A re-render (and therefore a potential component update) can be triggered by: 1. A change in internal state (useState, setState) 2. A change in props passed from the parent 3. A change in context (useContext) 4. An explicit call to forceUpdate() (in class components) These events trigger the render phase: React calls the component function again (or render() in a class). --- ## 2. React builds a new Virtual DOM tree React calls all the affected components and creates a new "virtual representation" of the UI, that is, a new Virtual DOM tree. Every JSX element turns into an object like: ```javascript { type: 'div', key: null, props: { className: 'btn', children: 'Click me' } } ``` --- ## 3. React compares the old and new tree Now reconciliation begins: 1. React takes the old Virtual DOM tree (before the update). 2. It compares it with the new tree created after render() is called. 3. It calculates which nodes changed: this is the diffing process. --- ## 4. The rules React uses to decide what to update ### Rule 1: comparison by element type If the element's **type** is the **same**, React **keeps** the old DOM node and **updates only the props**. ```javascript <div className="old" /> <div className="new" /> // same element ``` React will simply update className without recreating the element. If the type changed, React removes the old node and creates a new one. ```javascript <div>...</div> <span>...</span> ``` The old `<div>` will be removed, and `<span>` will be created from scratch. --- ### Rule 2: comparison by key in lists When you have a list of components: ```javascript {items.map(item => <Todo key={item.id} text={item.text} />)} ``` React uses key to figure out which elements stayed the same and which are new / removed / moved. - If key matches, the element stays. - If key is different, React treats it as a new element. This lets React avoid recreating the whole list, only the changed elements. --- ### Rule 3: comparison of props and state If the component is of the same type, but: - props changed (by value or reference), - or internal state was updated, React will **re-render** this component to recalculate the Virtual DOM. If the props haven't changed (and the component doesn't depend on context), React may skip re-rendering it (especially when using React.memo). --- ### Rule 4: using shouldComponentUpdate / React.memo For optimization, React can ask the component: > "Do you need to re-render?" - In class components: via shouldComponentUpdate(nextProps, nextState). - In functional components: via React.memo(Component, areEqual). If the answer is "No, everything's the same," React skips the update and doesn't call render(). --- ## 5. React computes the diff and updates only the changed parts of the DOM After comparing, React knows: - which components need to update; - which DOM nodes need to be redrawn; - which ones to leave as they are. Next comes the commit phase, where React: - applies these minimal changes to the real DOM; - calls useLayoutEffect and useEffect. --- ## Illustration of the process ```javascript State changed ↓ Component recreated the Virtual DOM ↓ React compared the old and new tree (reconciliation) ↓ Found the changed nodes ↓ Applied only the necessary changes to the DOM (commit phase) ``` --- ## Example ```javascript function App() { const [count, setCount] = useState(0); return ( <div> <Header /> <Counter value={count} /> <button onClick={() => setCount(c => c + 1)}>+</button> </div> ); } ``` - count changed, so React calls App() again. - A new Virtual DOM is created. - React compares: - `<Header />` - same props, doesn't update. - `<Counter value={count} />` - props changed, updates. - Only the text inside `<Counter>` updates; everything else stays untouched. --- ## Summary > React determines which components need to be updated using the **reconciliation algorithm**: by comparing the new and old Virtual DOM tree and analyzing **type, key, props, and state**. | What changed | Will React update it? | Why | |---|---|---| | state inside the component | Yes | the component is recreated | | props from the parent | Yes | new prop values | | Parent, but not the child's props | Depends | unless React.memo | | context | Yes | new context value | | an element's key | Yes | a new element is created | | Nothing changed | No | no diff found |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.