State Management
Overview
State Management is a center piece when creating applications. Especially since the rise of SPAs more and more state got shifted to the client. Hence, more and more bugs emerged due to poorly managed state.
In general we can distinguish between Component State and Application State. Former is the state that a component manages and React offers great ways to manage that, such as the following hooks:
Depending on the size of the application also Application State can be managed with these hooks.
But there are more ways, such as using React Redux or the hook pendant React Redux Hooks.
The underlying idea is that you have one central store that contains your application state and there is a specific way this state can be updated.
It is very similar to the useReducer-Hook. User Interactions dispatch Actions and these Actions then get handled by the Reducer.
Furthermore components are able to define Selector-functions which are able to select a certain slice from the store.
Also, we must not forget the Context API (see useContext), which helps us to make state available to distant components.
The following sections will extract the essential parts of this article.
When to use hooks
Remember, the Hooks API make it easy for us to hook into React lifecycle events, such as mounting, rendering and unmounting. They also help us to manage Component State in a very easy way. Using hooks simplifies component code and promotes encapsulation, reusability and maintainability. If a component is the sole user of some state then putting it with the component seems to be the right thing to do.
So, as a rule of thumb put component-related state into the Component State and non-related state somewhere else, e.g. into the Redux Store.
According to the article mentioned above these are valid reasons when to use hooks over Redux:
- app consists of a single view
- does not save or load state
- has no async I/O
- does not use the network
- does not save or load state
- does not share state
- does need some ephemeral/temporary local component state
Of course some of these things can be solved with e.g. useContext and other hooks, but the idea seems to be as
soon as your application does some "sophisticated stuff" you should manage it with something "sophisticated" as well.
When to use redux
Redux might be the choice if the component:
- uses I/O like network or device API
- saves or loads state
- shares its tate with non-child components
- deals with any business logic or data processing shared with other parts of the application
Conclusion
Redux introduces another abstraction layer and complexity to the application and I believe it can probably be substituted with
React Hooks (don't forget useContext). But as pointed out in the comment section Redux comes with lots of
benefits and built-in automated action telemetry and there are lots of plugins for that.
A more lightweight solution could be Autodux. But there is a lot more stuff going on like Easy Peasy another "lightweight Redux" or something completely different like stated-library.