Digital garden about making a web app using:

TypeScriptNext.JSXStateStorybook

Digital garden about making a web app using:

TypeScriptNext.JSXStateStorybook

Table of Contents

State Management

Best approach to web app state management.

Last Tended

Planted

Status

Tags

Named States

A common approach in React is to use boolean flags to keep track of state. Example:

A disadvantage of this is it results in untended states. The intended amount of states for the component is 4; idle, fetching, success & error. The actual number of states produced from the above approach is 23 = 8. Changing the approach from boolean flags to named states can fix this. Example:

Intended number of states = 4. Actual number of states = 4.

Best Approach

I believe finite-state machines are the best fit approach to UI state management. Benefits:

  • Logic can be co-located & seperated from implementation

  • Named states is core to the structure

  • You can easily manage distributed behavior through the actor model

  • Logic can be visualized as a diagram, acting as accurate documentation & making it easier to understand a system

  • It's battle proven, with 30+ years of refinement

  • Formalised logic, making a codebase more consistent

Currently, XState is the most popular JavaScript finite-state machine library.source

Examples

Courses