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.
SimpleStateManager | StateManager | AsyncStateManager | |
|---|---|---|---|
| Inherits from class | -/- | SimpleStateManager | StateManager |
| Supports asynchronous set-state functions | No | No | Yes |
get/set/reset/dispose methods | Synchronous | Synchronous | Asynchronous |
| Supports lifecycle hooks | No | Yes | Yes |
| Can be hidden from React Developer Tools | No | Yes | Yes |
| Computing overhead | Very low | Low | High |
SimpleStateManager
- A bare-bones state manager.
- Very fast and lightweight.
- No lifecycle management.
- State values cannot be hidden from React Developer Tools.
- When
.setcalls are nested, only the outermost one will be effective. The nested.setcalls will only result in a momentary state change and get overwritten by its outer.setcalls 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
.setcalls are nested, they will be triggered in order, from outermost to innermost. - Has more flexibility over
SimpleStateManagerand 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
StateManagerexcept.get,.set,.reset, and.disposeoperations are asynchronous. - Slower than
StateManagerin 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
.setmethod.AsyncStateManagerwill wait for these actions to be completed before setting the state. - Go to API reference.