react state management

Introduction

In this post I will show an example of how to achieve state management in an application using React Context and the useReducer hook, following the Flux pattern and static type checking with TypeScript. This approach is based on Kent Dodds’ approach and I highly recommend his website. The concept is important and is the focus of this post, but the source code can be viewed on GitHub (link below).

Motivation

Libraries and frameworks are a phenomenon – without them, web applications, tech stacks, and the development experience would be stuck in the first decade of the millennium.

Not only are libraries and frameworks revolutionary, but modern design patterns are too – of interest to us is the Flux pattern, addressing the need for state management in a uni-directional data flow environment like React.

These two combined have led to innovative solutions like Redux and MobX, and more solutions appear on the daily. I've seen developers use libraries and frameworks too quickly, before really analyzing whether it is a good fit for a project or not. Just because a framework like Redux provides an abundance of features, does not mean those features should be used in your project - the overhead of working with the framework might outweigh the benefit, especially in less complex projects. Even though it is hard to do with rapid improvements and changes in technologies (especially in the JavaScript world), I’m a firm believer that it’s better to exhaust native alternatives first, before beginning to rely on third party frameworks and libraries. React has grown tremendously with the introduction of Hooks, and eliminated the need for state management libraries such as Redux and MobX. Flux echoes this sentiment. Of course, these libraries might provide other features that could be useful, depending on the project, and perhaps then it makes sense to use it from an application architectural perspective.

Pros

1. Clean application architecture, making it easy for other developers to seamlessly understand and contribute to the code base.

2. Avoid "prop drilling", which refers to the tedious nature of getting data to a lower descendant in the React component tree.

3. Only rely on React and no external libraries for state management (keeping it lean).

4. Flexible - this approach can be used as much or as little in a project as it is necessary. The important thing to remember is to keep the UI interaction state separate from the application data state, and as local as possible.

An image is worth a thousand words, and this diagram illustrates how the pattern fits together.

The Context consists of the state and action (dispatch) that is made available through the provider at the root level of the application (Index). App and any of its descendants has access to the state and dispatch by including the useAppState and useAppStateDispatch hooks.

Typescript

Using type checking is optional, but I find it valuable since it makes following the pattern easier, and prevents scenarios that should not occur in reality, from happening (those pesky runtime bugs!)

Check out this link for the source code on GitHub, where the above is implemented using TypeScript.

Conclusion

This post showed how I handle state management without libraries like Redux or MobX, using the useContext and useReducer hooks in React. Throwing TypeScript into the mix is optional, but recommended.

As promised, you can view the code in this GitHub Repository. I encourage you to use this approach as a starting point, and change any of the conventions to suit your needs. Remember to let me know how this worked for you!