If you're a frontend developer, full-stack guru, or anyone in between, you are probably aware of a concept known as state management. How would I define it in my own words? An efficient method of storing data in the browser by implementing data persistence using various tools. To further explain this, some popular methods for state management are:
- State management libraries, e.g. Redux, Easy Peasy, Zustand.
- Built-in methods from frontend frameworks, e.g. Context API in React.
- Browser URL parameters.
- Cookies.
- And last but certainly most, Local Storage.
I specifically want to talk about Local Storage. As a React developer, I've used all of the options I've listed above. Though not exhaustive, these are some of the most common and reliable ways to manage state in the browser. These are the state management methods that I've found to be effective, easiest to implement, and frequently reused in all of the projects I've contributed to.
The Hot Take🌶️♨️🔥
Local storage is the best state management method. Now, before you bite my head off, allow me to explain. I revisited an old project that used Redux and another that used Easy Peasy because I had realized that, despite using these respective tools, I had no idea exactly how they worked under the hood. Is there an invisible database somewhere? Is the state stored on my hard drive? Is there some kind of advanced referencing algorithm that magically remembers all your state when you reopen the browser window?
So I did what I do best, I inspected the browser using developer tools🔍. I checked the cookies, sessions tab, and to my surprise, there the data was, saved in local storage. Neatly packed and parsed in JSON format. I immediately remembered the days before I started using React, when the only way I knew how to handle state was local storage. The point is, most of these tools are just abstractions that allow us to use the underlying technology, so why use them instead of just using local storage directly? A good argument is, why would one want to go through the steps below?
- Arrange the data you need saved or persisted in the application's state.
- Find a way to safely and correctly convert it to a local storage acceptable format, such as JSON.
- Ensure that it is indeed stored in local storage.
- Create other methods to retrieve the state from local storage.
- Implement various fallback options for null, undefined, or incorrectly formatted data (optional but necessary).
- Implementing type safety.
Alternatively, you could just set up efficient state management using the recommendations from the official documentation of each of the tools listed above🤔. This just begs the age-old question: to build it myself or to reuse. That is the question. I really believe that one could efficiently manage application state with local storage only, by writing reusable methods to store and create data using best practices and clean coding techniques, while not relying on a state management library.
I hope you enjoyed this article, and feel free to shoot me a message if you'd like to share some feedback.
