Zustand: What's it? - Part I

Hi there, I am Naélio Freires 👨🏻‍💻 and I am a Frontend Engineer.

I am writing this post to show you how I like working with Zustand and how you can use it to make your day easier.

I • What's it?

In a few words, Zustand is a state management library for React applications. It provides a simple, clear, and flexible API for efficiently managing state. It is often defined as a minimalistic approach to state management.

II • Simple Case

If you are familiar with hooks in React, you won't face any problem working with Zustand, because it works as simply as it should be. Just take a look at the image below and see with your eyes how much easier it is to start using it.

Now that we already had the first contact, let's go ahead...

III • Persisting Data

It is really simple to persist data in Zustand, the library provides a persist function, and that function accepts two arguments.

• on the first one, you will provide the store

• the second one is an Object where you must set { name, storage }the name will act like a unique key; the storage is the type where you can store the data, like sessionStorage, localStorage, AsyncStorage, etc.

In the example below, we are using the AsyncStorage.

Since we did a quick overview of how it works, let's go ahead.

IV • Good Practices

I • state/actions

One of the tips that is recommended by Zustand is to split the state/actions for the usage, it has a few advantages:

• It doesn't require a hook to call an action;

• It facilitates code splitting;

In this pattern, the benefit is that you can import only what you want, and in some cases, it is very which is very straightforward in some casesore, but we want to update some small piece, maybe the name of the user; for this case, you could create useUpdateUserName and import it only when and where it is necessary, and you will know that this hook has only this responsibility to handle, avoiding side effects.

I • Immer

Since we are working with shared states across the app, sometimes changing the values can not be performed or bring security for us when we start to think about immutability.

So, a performance and good practice tip is to wrap your state with Immer; in a few words, it allows you to work with an immutable state in a safe and convenient way.

Now, let's see how it works in a code example;

if you take a look, it didn't change so mu on our useCountStore because Immer will work like a wrapper in our state and handle it by himself, so don't worry; the responsibility is for him.

If you want to learn more about it, click on the link below.

So, if you got here, it's not the reason why I decided to write this article, but I decided to show a few points before showing the real reason, how you can improve the usage and maintainability.

I will jump on it in the second part; it is more like showing my point of view about some topics and how I like to use Zustand in a better way and improve the development process.

Thanks, see you soon 😜