React Mental Model Sketch
3th August 2023

• Asynchronous Data Streams: In React, the state and props can be thought of as streams of data that flow through the components. When state or props change, the affected components react to those changes, leading to a re-render. Here state refers to both the internal states and context states. 

• Propagation of Change: React uses a virtual DOM (VDOM) to efficiently propagate changes to the actual DOM. When a change occurs in the component's state or props, React creates a new VDOM tree and compares it to the previous version. This comparison (called reconciliation) identifies the specific changes, and React then updates only those parts of the actual DOM.

• Reactivity to Changes Over Time: React components are designed to automatically respond to changes in their state and props. This means that as the underlying data changes over time, the UI automatically updates to reflect those changes. This reactivity is what makes React's UI feel dynamic and responsive.

• Declarative Approach: React emphasizes a declarative coding style, where you describe what the UI should look like for a given state, and React takes care of updating the UI when the state changes. This fits well with the idea of responding to changes in a declarative manner, which is a core concept in reactive programming. The bindings of component's view logic to state and props can be considered anologus to a special case of composite subscription to observables.

• Use with Observables: Though not a requirement, React can be used with observables (e.g., RxJS) to handle asynchronous operations and manage state as observable sequences. This further aligns React with reactive programming principles.

React allows us to create Custom Components. We design the State, View Logic, Event Handlers, and Effect Logic for these Components. These Components can then act as building blocks and can be further composed hierarchically to form larger Components.

When a component instance is created, React monitors its State and mounts its Visual Component as specified by the View Logic. The Visual Component, characterized by its appearance and behavior, can transition between well-defined Visual States.

The user interacts with the Visual Component and experiences the Visual Component transitioning through different Visual States. These interactions may cause events and execution of corresponding event handlers. In addition to user-triggered events, other events may also activate handlers. The execution of these handlers can lead to updates in the Component’s State.

Upon State changes, React may initiate a Visual State Transition, specified by the re-execution of View Logic. After processing the state transition, React invokes Effect Logic for synchronization with external entities, commonly referred to as executing Side Effects. If updates occur during a given transition, React accumulates the updates and applies them after the transition is settled, leading to a new Transition Cycle and possibly a new Visual State. React uses a lot of optimization techniques during the transition cycles to prevent redundant Visual updates.