What Is an Area Update?
Learn about React's single update pattern for handling user actions and explores two approaches to share state between distant components.
User actions and area updates
On a typical website, once the site is loaded, it starts listening to all user actions. Each action received gets handled on a first-come, first-served basis. Normally, the impact of each action is limited to one small region of the screen, using a UI term, a single component. However, sometimes, a user action can do more than that.
The single update pattern in React
Let's use the computer as an analogy. Say we decide to change the color settings of our system. Once the color is changed, the computer goes through all the open windows and applies that color to them. Therefore, this action can impact multiple applications spread across the screen. This becomes an area update.
Have you wondered how you can make an area update when the impacted components are located very distantly from each other? To be able to answer this question, let's first recall a single update.
A fiber tree is scheduled for a single update upon receiving an action. This update is localized around a source fiber where the action is received (the red dot in the image below). React follows the source, collects all the changes associated with it, and then applies them to the DOM (red lines). This is the single update pattern in React.
