State in React

By now, you should have some idea of what a state is. To recap, a state is a piece of memory stored inside a fiber, introduced in Chapter 3, Hooking into React. When combined with props, a state can represent a UI screen deterministically.

Figure 4.1 – A fiber tree with a source fiber

For example, let's say we build a site and end up with a fiber tree (such as the one seen in Figure 4.1). When a user makes an action (such as a click), the action sends a signal via an event handler to a fiber (the red dot in Figure 4.1). We call this fiber a source fiber.

Now, say the dispatched event changes a counter from 0 to 1. React should schedule an update based on this user action and then prepare all of the Document Object Model (DOM) elements for the screen. Assuming the red lines are the fibers that need to be changed, how does React figure this out?

Upon receiving this update request, React goes through the fiber tree from the root...