Vigyata.AI
Is this your channel?

React 19 Tutorial - 20 - How State Updates Work

6.0K views· 191 likes· 5:55· Nov 25, 2025

🛍️ Products Mentioned (2)

Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com How State Updates Work in React 19

About This Video

In this React 19 lesson, I take a simple counter example and use it to explain what actually happens when you call a state setter like `setCount`. On the surface, you click a button, the number goes up, and the UI updates. But under the hood React follows a process, and understanding it helps you see why React stays fast even when your app grows to hundreds of components. I break the update down into three phases: trigger, render, and commit. In the trigger phase, calling `setCount(count + 1)` doesn’t immediately update the UI — it simply tells React that this component needs to update and it gets queued. In the render phase, React reruns the component function (which is why my `console.log('SimpleCounter component rendered')` prints again) and calculates what changed by comparing the new output with the previous render. Finally, in the commit phase, React applies only the actual changes to the DOM — for example, updating just the text node inside the `h2` from 0 to 1 while leaving everything else untouched. I also demonstrate a surprising behavior: logging `count` before and after `setCount` in the same click handler shows the old value both times, even though the UI updates. That sets us up to understand state updates more deeply in the next part.

Frequently Asked Questions

🎬 More from Codevolution