In React {Transitions} = F(state)

Summary

{transitions} = f(state)TL;DR: Thinking about the React component tree as modeling a state machine can help clarify the implications of asynchronous updates and React’s concurrent features.A state machine is a formal way of describing a stateful system which changes over time. It generally consists of explicitly defining the states that the system can be in, as well as defining a state transition table which enumerates the set of valid transitions (updates which put the machine in a new state) for each discrete state.A React application can be thought of as modeling a state machine. Each render takes a state and produces the UI for that state. This is the famous UI = f(state) mental model of React. But, for complex applications, formally enumerating a transition table is often not feasible. When the number of possible states is not finite, a table will not suffice and we must instead define a mapping: a conceptual function which takes in a state and returns the set of valid transitions for that state.If you look closely, each React application actually already defines a version of this function. Developers implicitly define the set of transitions that are valid for a user to take in each state by the event handlers that their components bind into the DOM when rendering that state.We can say that the React component tree not only defines UI as a function of state, but also defines the set of valid transitions for the state with that same function. More succinctly:{transitions} = f(state)For exampleA Todo app might support a state update complete(todoId) which marks a todo as completed. It would be an error for a user to “complete” a todo which has previously been deleted. At best it would result in showing the user an error popup, and at worst would result in a “TypeError: Cannot set properties of undefined” JavaScript error. In state machine terms, complete(x) is not a valid transition for a state that does not include a todo with the id x.The React programming mode...