Suggest an editImprove this articleRefine the answer for “What happens when a component updates?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**An update** is the lifecycle stage where React re-invokes the component to update its virtual representation (Virtual DOM) and synchronize the changes with the real DOM. **Key point:** React compares the new virtual tree with the previous one (diffing) and applies only the necessary changes to the real DOM, without a full page repaint.Shown above the full answer for quick recall.Answer (EN)Image## What "updating" a component means > An **update** is the lifecycle stage > where React re-invokes the component > to update its **virtual representation (Virtual DOM)** and **synchronize the changes with the real DOM**. --- ## What triggers an update A component re-renders when: | Reason | Example | |---|---| | State (`state`) changed | `setCount(count + 1)` | | New props (`props`) arrived | The parent passed new data | | The parent component itself re-rendered | Even if the props didn't change | | Context (`useContext`) updated | The provider's value changed | --- ## Update stages step by step ### 1. Data changes React gets a signal that the data has changed: ```javascript setCount(count + 1); ``` This **doesn't trigger an update immediately**. React puts the update in a queue (batch) and decides when to re-render the component (especially in React 18 with concurrent rendering). --- ### 2. The component function is called again React **calls the component again** (like an ordinary function) to compute what JSX it should now render. ```javascript function Counter() { console.log("Render"); const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>Counter: {count}</button>; } ``` Each call to the component = a new "render". --- ### 3. Comparing the Virtual DOM (diffing) React compares the **new virtual tree** (the result of the new JSX) with the **previous tree**. - If elements differ -> React changes only the parts of the DOM that changed. - If they're the same -> the DOM is left untouched. This makes updates **fast and targeted**, without a full page repaint. --- ### 4. Updating the real DOM React applies only the necessary changes to the browser DOM. For example: if only the text in a button changed, React will replace **only the text**, not recreate the whole button. --- ### 5. Running effects (`useEffect`, `useLayoutEffect`) Once the DOM is updated, React runs the effects whose **dependencies changed**. ```javascript useEffect(() => { console.log("Update: count changed"); }, [count]); ``` If `count` changed, the effect will run again. Before that, React will call the **cleanup function** of the previous effect. --- ## Example: the full update cycle ```javascript function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log("Mount"); return () => console.log("Unmount"); }, []); useEffect(() => { console.log("Update: count =", count); return () => console.log("Cleanup before the next effect"); }, [count]); return ( <button onClick={() => setCount(c => c + 1)}> Counter: {count} </button> ); } ``` What happens: ```javascript Mount Update: count = 0 ← first effect run (button clicked) Cleanup before the next effect Update: count = 1 (button clicked) Cleanup before the next effect Update: count = 2 ``` --- ## Difference between mounting and updating | Behavior | Mounting | Updating | |---|---|---| | Is the component called | Yes, for the first time | Yes, again | | Is the DOM created | Fully | Only the changes | | `useEffect(() => {...}, [])` | Fires | Doesn't fire | | `useEffect(() => {...}, [deps])` | Fires after mounting | On dependency change | | `cleanup` in `useEffect` | None | Before the next effect call | --- ## What's usually done during an update | Task | Example | |---|---| | React to data changes | `useEffect(() => {...}, [value])` | | Synchronize the DOM with the new state | Applying animations, scrolling | | Update subscriptions | Unsubscribe first, then subscribe again | | Recompute derived values | `useMemo` | | Optimize re-renders | `React.memo`, `useCallback` | --- ## Class component equivalents | Stage | Class method | Functional equivalent | |---|---|---| | After update | `componentDidUpdate(prevProps, prevState)` | `useEffect(() => {...}, [deps])` | | Before update (rarely used) | `shouldComponentUpdate()` | `React.memo` / `useMemo` / `useCallback` | --- ## Important to remember | Feature | Explanation | |---|---| | The component function is called **again on every update** | But state (`useState`) persists between renders | | React itself optimizes DOM updates | It changes only what's needed | | You can't change the DOM directly in the function body | Only in effects (`useEffect`, `useLayoutEffect`) | | `useEffect` runs **after** the DOM update (asynchronously) | The UI updates first, then the effect runs | | `useLayoutEffect` runs **before** the screen paints | For synchronizing element sizes or positions | --- ## Summary | Stage | What React does | What the developer does | |---|---|---| | 1. Data change | Receives new `state` or `props` | Calls `setState` / `setCount` | | 2. Render | Calls the component again | Returns new JSX | | 3. Diff | Compares the old and new Virtual DOM | Does nothing - React handles it | | 4. Commit | Updates the real DOM | Can react in `useEffect` | | 5. Effects | Runs hooks whose dependencies changed | Performs side effects | --- **Main idea:** > During an **update**, React calls the component again, > recreates the Virtual DOM, compares it with the previous one, > updates only the necessary parts of the DOM, > and runs the effects whose dependencies changed.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.