HookState.js — the most straightforward React state management.

State management in react getting crowd these days, a lot of packages comes with their specialization and uniqueness.

As the mature one, Redux goes too advanced and hard to follow, even for novice developers.

In this article, I want to introduce one of the simplest and easiest state management in react Hookstate; with Hookstate, we do not need to do many ceremonies like create reducer and action, but we can achieve the same good stuff like Immutable and single source of truth.

Huh? Another state management?

I know, I know. But never mind and bear with it for now.

Hookstate.js

Hookstate.js is one of the hundred state management libraries.

From its website, they said:

The swift but straightforward and flexible state management that is based on React state hook

Hookstate uses React hook to do state management so developers can be familiar with it.

Notes: Hookstate uses the same hook name for managing state, and it may confuse you. useState and its import from @hookstate/core and if you want to mix with React.useState you can change the hookstate import with import { useHookstate } from @hookstate/core .

Local State vs. Global State

In Hookstate, you can use it to do global state and local state.

Global state initialization

with global state, our state is placed in global space so all component can access it with useState (from HookState).

Local state initialization

This how you use it as a local state.

Let’s get started

In this tutorial, we won’t be use Typescript and any CSS for simplicity reasons. What we will create is a simple login system.

Ok, let’s jump into the code.

Diagrams

Store and diagram

Create React App

let's create a new project with :

npx create-react-app hookstate-simple-login

You can change the project’s name to any name you want.

And install other dependencies we need for the project.

npm install --save @hookstate/core react-router-dom

Folder management

Project Directory

We will use this folder convention, but you can freely use any.

App.js

nothing special in the App.js file. We use react-route-dom to do navigation.

Route.js

We will create two functional components in routing: PublicRoute and PrivateRoute, and this component will check for the global auth store.

Login.js

Login.js file will be self-explanatory. We use useEffect to do a redirect, usually, you can do this on handleLogin function, but for this tutorial, I want to show you how the state change and inform our page that something is changing.

Homepage.js

AuthStore.js

The store folder will hold our state. We’ll create a AuthStore file and it will implement a global state and will act as a Model in MVC Pattern

Our stores will expose react hook: useAuthState() that can be used on our page later.

Run the code

to tun the code, just type npm run start

Conclusion

React give you the freedom to do state management, you can use any library you want, but sometimes it makes React feel complicated.

It’s you to judge what library you use, and you have to choose it wisely.

You can clone this project from Github. https://github.com/psudocode/hookstate-simple-login-system.git

If there something missing in this article, let me know in the comment section.

Happy codding.