Finite State Machine and Statechart

React Model

React allow us to model UI as data flows:

1. rendering that transform data into UI
2. responding to UI event by updating data ¹

UCM Structure

User interface-control-model is a way to organize UI code by separating them into three layers:

1. User interface
2. Control object
3. Model (shared state)

Applying UCM model to React, it leads us to separating two entities:

• components whose main responsibility is to translate data (props) into JSX
• classes/components whose main responsibility is to coordinate the components, updating states and integrate with services.

Although UCM model provides guidance on how to organize the code, but without careful design, separating presentational and container components just move the code complexity from one component to another, understanding the code is not easier than not separating them.

To makes our UI code easier to be understood and maintained, we need a model/technique that we can use to organize the code in container component (control object).

Finite State Machine

A finite state machine (FSM) is a model of a system which:

1. can only be in one of a given number of possible states at any moment
2. accepts input events that may outputs (actions) or a change in state.

FSM can be represented with state transition diagram.

Footnotes

1. I am using UI event very loosely here, which includes events emitted by browser as well as emitted by React (lifecycle hooks and useEffect). ↩