Hookstate And Why?
What is Hookstate?
Hookstate is a fast and flexible state management tool based on the React state Hook. Hookstate is fast, and has great performance due to its unique method for tracking used/rendered and updated state segments. It is a small library packed with tons of features to accomplish handling states in many different forms like global state, local state, nested state, nullable state, async state, and recursive state. React Hookstate is feature-rich, flexible, and the library takes the idea of simplifying state management in React apps to a whole new level. Hookstate works almost exactly like the React useState hook. With Hookstate, creating a global state is just as easy as creating a local state with the useState hook. In addition to its simplicity, Hookstate also extends our created state instance with other useful features. It also has many optional plugins as well that help us customize our state hooks, like @hookstate/persistence, @hookstate/validation, and @hookstate/broadcasted.
Why Use Hookstate?
One reason why is that you have a single source of truth for the data in your application and keeps your code dry. Second is the ease of accessing the data whenever and wherever you want, which can facilitate the speed of your application development and ease the pain of prop drilling in larger applications. You can also avoid tons of API calls if you design it well, which could possibly take a load off from the backend server, which in the end would make your application run faster and smoother on multiple devices. I think one great thing about Hookstate is how simple it is to get and update global state in many different components. Hookstate provides us with a few methods that make this very simple, and below I will list out some of the Hookstate features available to us.
createState => Creates a new state and returns it. This is mainly used to create a global state of an application. Unlike useState you can destroy this state by calling destroy() method to delete the state(only applicable for special scenarios).
useState => Mainly used for creating global or local state inside a component. useState can also be used to create a scoped state.
none => A special symbol that can delete properties from an object calling. So instead of using delete or filter, you can pass state.set(none) to delete an object or property.
state.get() => This method returns the underlying state value referred to by the path of this state instance. It will return the same result as state.value.
state.set() => This method sets a new value for a state. It is similar to the setState variable returned by React.useState hook. It can be a value, a promise resolving a method, or a function returning one of these.
state.merge() => Similarly to set() method updates state value. If the current state value is an object, it does a partial update for the state object. If the state value is an array and the argument is an array, it concatenates the current value by the passed argument and sets it to the state.
How Hookstate Works
I think it might be best to see a little sample of how it works. Let’s take a look at some code I wrote a few months ago and see just how simple creating a global state and manipulating that state in other components is.
So what this code above will do is setup a global state for messageList1 and messageList2. Render both these components in our App.js component. Then inside Person1.js and Person2.js we get and update that state that lives in store.js. And that’s about it, using .merge() and .get() are pretty simple and I think in larger applications it might be just as simple but I have yet to try so that is what I am going to practice using Hookstate with next.
Conclusion
In conclusion here was just a little bit about Hookstate and the things we are able to achieve with it with minimal code. Hookstate can be used to do many different things and I plan on testing out everything that is has to offer. Got lost in the blog a little bit? Install Hookstate and try using it to see what you think. Thank you for reading my blog and tune in next time for something else cool!
