State management approach for the Dashboard

[davidebriani]

As we keep evolving the Dashboard, we'd like to have a streamlined and consistent way to manage state and data within the web app. Several factors should be considered for each potential approach:

• Structured and well-defined architecture to manage and share state
• Support for testing and debugging
• Async data management, caching, and refreshing
• Ability to persist state to external storage, such as localStorage
• Typescript support
• Established community and ecosystem

[davidebriani]

Here are three libraries with distinct approaches to state management that we can evaluate.

Redux

Architecture	Async data	Data persistency	Typescript support	Testing/debugging	Community/Ecosystem
Flux, clean and opinionated but boilerplaty	Needs additional (opinionated) middleware: redux-thunk, redux-saga	With redux-persist	Yes, boilerplaty	Great. Redux DevTools and time-travel	Rich and mature

Pros:

• Built from the Facebook development team (same as React)
• Structured approach
• Selectors and pure functions logic is good for testable and maintainable code
• Clean state, side effects management, separation of concerns
• Nice debugging experience with Redux DevTools
• Architecture scales well
• Mature and stable APIs

Cons:

• Steep learning curve
• Non-reactish approach
• Needs a lot of boilerplate code
• Tends to become slow and memory hungry with big apps
• No built-in async support
• Needs middlewares to plumb functionality into its architecture
• Difficult to achieve code-splitting

Recoil

Architecture	Async data	Data persistency	Typescript support	Testing/debugging	Community/Ecosystem
Atomic, simple and follows React style	Easy to do and supports concurrent mode/Suspense	No support but can be easily done manually	Yes	Good. Time-travel and snapshots	Young, still experimental

Pros:

• Built from the Facebook development team (same as React)
• Straightforward support for derived state: getter/setters selectors to transform state values
• Selectors and pure functions logic is good for testable and maintainable code
• Easy to compose or share state for React components
• Nice and easy handling of both sync & async data, also supporting concurrent mode/Suspense
• Easy code-splitting
• Performant
• No boilerplate required
• Follows React patterns for state management and integrates well with it

Cons:

• Experimental and possibly unstable APIs

MobX

Architecture	Async data	Data persistency	Typescript support	Testing/debugging	Community/Ecosystem
Proxy, OOP style. Opinionated with MobX-State-Tree	Easy to do but up to you	No support but can be easily done manually	Yes	Good, has a DevTools extension	Not so stable APIs but mature ecosystem

Pros:

• Performant and scalable architecture
• MobX-State-Tree has support for both static typing (Typescript) and runtime type checking
• MobX-State-Tree supports snapshots and time-travel debugging

Cons:

• Moderate learning curve
• Can be hard to reason about data flow
• Can yield hard-to-debug, unexpected results