Skip to main content

Which State Manager Should I Use?

The package comes with three types of State Managers, each with slightly different characteristics, tailored for different use cases.

SimpleStateManagerStateManagerAsyncStateManager
Inherits from class-/-SimpleStateManagerStateManager
Supports asynchronous set-state functionsNoNoYes
get/set/reset/dispose methodsSynchronousSynchronousAsynchronous
Supports lifecycle hooksNoYesYes
Can be hidden from React Developer ToolsNoYesYes
Computing overheadVery lowLowHigh

SimpleStateManager

  • A bare-bones state manager.
  • Very fast and lightweight.
  • No lifecycle management.
  • State values cannot be hidden from React Developer Tools.
  • When .set calls are nested, only the outermost one will be effective. The nested .set calls will only result in a momentary state change and get overwritten by its outer .set calls right after.
  • Has the least flexibility and number of features, and is unlikely to have new features in future updates.
  • Suitable for general use cases (UIs, forms, lists, etc.) that do not require persisting state or hiding state values from React Developer Tools.
  • Go to API reference.

StateManager

  • Inherits everything from SimpleStateManager.
  • Slightly slower than SimpleStateManager, but still responsive enough to accommodate scenarios that involve rapid key presses and mouse events.
  • Supports lifecycle hooks.
  • State values can be hidden from React Developer Tools.
  • When .set calls are nested, they will be triggered in order, from outermost to innermost.
  • Has more flexibility over SimpleStateManager and is more likely to be updated to work with new external features where it makes sense to integrate them. (For example, new features from libraries such as React or browser APIs.)
  • Suitable for general use cases (UIs, forms, lists, etc.). This is the default recommendation.
  • Go to API reference.

AsyncStateManager

  • Similar to StateManager except .get, .set, .reset, and .dispose operations are asynchronous.
  • Slower than StateManager in order to accommodate asynchronous set-state functions.
  • Not suitable for scenarios that involve rapid state changes as it may result in noticeable lag.
  • Only use this as an escape hatch if you need to call asynchronous functions inside the set-state function for the .set method. AsyncStateManager will wait for these actions to be completed before setting the state.
  • Go to API reference.