30,000 State Changes in React: How Many Re-Renders?

In this video, we dive into the details of React's state update batching mechanism and object equality check. When we make 30,000 state changes using a single setState call, React doesn't re-render the component 30,000 times. Instead, React batches the state updates and performs a single re-render after all the state changes have been applied.

But that's not the only reason why the component re-renders only once. React also uses a shallow equality check (Object.is) to compare the previous state and the new state. In this case, React detects that the previous and new state are equal due to the use of a single object reference, so it assumes that the component doesn't need to be re-rendered and skips the rendering process altogether.

Understanding how React handles state updates and re-renders is crucial for building efficient and performant React applications. In this video, we explore these concepts in depth and provide tips for optimizing your React components for better performance.

Source code: https://github.com/Piyush-Use-Personal/basic-react/blob/what-if/30000-setstate/src/App.tsx

Full playlist: https://www.youtube.com/playlist?list=PLKUkNf4DXn9LgGNZwBUNFD_ZvuTgAdEt4

Видео 30,000 State Changes in React: How Many Re-Renders? канала Classy Endeavors