The useState Hook Design

Understanding state and React Fiber

We have an idea of what a state is. To recap, a state is a piece of memory stored inside a fiber. When combined with props, a state can represent a UI screen deterministically.

For example, let's say we build a site and end up with a fiber tree, as shown in the above image. 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 the above image). 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. Quite a few fibers (shown as the gray lines) do not have anything to do with this update, so they are cloned from the previous scene. When the update arrives at the source fiber, let's imagine the fiber ...