Hearten Blogs

Sahil Maiyani

---
In the first post we discussed the basics of Zustand and started sample project. In this part we are going to extend that discussion further and connecting the missing dots.

## Creating the App Component:

```js
function App() {
  const user = useUserStore();
  const booking = useBookingStore();
  const guests = useBookingStore(guestsSelector);

  const handleLogin = () => {
    user.login();
  };

  const handleLogout = () => {
    user.logout();
  };

  const handleCheckinChange = (event) => {
    booking.addCheckin(event.target.value);
  };

  const handleCheckoutChange = (event) => {
    booking.addCheckout(event.target.value);
  };

  if (!user.isAuthenticated) {
    return (
      <div className="App">
        <button onClick={handleLogin}>
          Login
        </button>
      </div>
    );
  }

  return (
    <div className="App">
      <p><b>Name:</b> {user.name}</p>
      <p><b>Email:</b> {user.email}</p>
      <br />
      <button onClick={handleLogout}>
        Log out
      </button>

      <br />

      <form>
        <p>
          <label htmlFor="destination">Destination</label>
          <input type="text" id="destination" name="destination" />
        </p>
        <p>
          <label htmlFor="checkin">Checkin</label>
          <input type="date" id="checkin" name="checkin" onChange={handleCheckinChange} />
        </p>
        <p>
          <label htmlFor="checkout">Checkout</label>
          <input type="date" id="checkout" name="checkout" onChange={handleCheckoutChange} />
        </p>
      </form>
    </div>
  );
}

export default App;

```

Finally, we’re creating the App component. This component uses both the user and booking stores. It defines several event handlers that call the methods in the stores. The component’s render method returns different JSX based on whether the user is authenticated or not. If the user is not authenticated, it displays a login button. If the user is authenticated, it displays the user’s name and email, a logout button, and a form for entering booking details. The form includes input fields for the destination, check-in date, and check-out date. The values of the check-in and check-out date fields are bound to the corresponding properties in the booking store.

# Why Zustand?

Developers might choose to use it for several reasons:

1. **Simplicity:** Zustand provides a straightforward API that's easy to understand and use. It doesn't require a lot of boilerplate code, which can make your codebase cleaner and easier to maintain.

2. **Flexibility:** Zustand doesn't enforce a strict architecture like some other state management libraries. This gives you the freedom to structure your state in the way that makes the most sense for your application.

3. **Performance:** Zustand is lightweight and has minimal impact on performance. It uses React's built-in `useState` and `useEffect` hooks under the hood, which are optimized for performance.

4. **Asynchronous Actions:** Zustand supports asynchronous actions out of the box. This makes it easy to handle operations like fetching data from an API.

5. **Selectors:** Zustand allows you to create selectors, which are functions that derive data from the state. This can be useful for optimizing your application, as components will only re-render when the data they depend on changes.

# Performance with Zustand

Let’s consider an example. Suppose you have a large application with many components, and you’re using the Context API for state management. If a small part of your state changes — say, a single property on an object — every component that consumes the context will re-render, even if they don’t use that particular piece of state.

On the other hand, if you were using Zustand in the same scenario, only the components that use the updated piece of state would re-render. All other components would remain unaffected. This can result in a noticeable performance improvement, especially in larger applications or in cases where state updates frequently.

---

With Zustand, you can manage your application’s state in a more intuitive and less boilerplate way. Give Zustand a try in your project and experience the difference!

A small, fast, and scalable bearbones state management solution

Zustand for State Management PART 2


# What is Zustand?

> Zustand is a small, fast, and scalable state management solution for React18. It provides a simple and intuitive API based on hooks.

[Ref link](https://docs.pmnd.rs/zustand/getting-started/introduction)

* **Bearbones State Management:** Zustand is not boilerplatey or opinionated, but it has enough convention to be explicit and flux-like.

* **Store Creation:** Your store is a hook! You can put anything in it: primitives, objects, functions. The set function merges state

* **Component Binding:** You can use the hook anywhere, without the need of providers. Select your state and the consuming component will re-render when that state changes

# Dive into Code (Example)

## Importing Zustand:

```js
import create from "zustand";
```

Here, we’re importing the create function from the zustand library. 

## Defining a Mock User Fetch Function:

```js
const getUser = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const user = {
        name: "Professor Plum",
        email: "prof@plum.ac",
      };

      resolve(user);
    }, 1000);
  });
};

```

This function simulates an asynchronous operation, such as fetching user data from an API. It returns a promise that resolves with a user object after 1 second.

## Creating User Store:

```js
const useUserStore = create((set) => ({
  isAuthenticated: false,
  name: null,
  email: null,

  login: async () => {
    const user = await getUser();

    set({
      isAuthenticated: true,
      ...user,
    });
  },
  logout: () => {
    set({
      isAuthenticated: false,
      name: null,
      email: null,
    });
  }
}));
```

Here, we’re creating a user store using Zustand’s create function. The store has three properties: isAuthenticated, name, and email. It also has two methods: login and logout. The login method fetches the user data and updates the store, while the logout method resets the store to its initial state.

## Creating Booking Store:

```js
const useBookingStore = create((set) => ({
  checkin: null,
  checkout: null,
  guests: 1,
  addCheckin: (checkin) => {
    set({ checkin });
  },
  addCheckout: (checkout) => {
    set({ checkout });
  }
}));
```

Similarly, we’re creating a booking store. This store manages the booking details, including the check-in date, check-out date, and the number of guests. It has two methods: addCheckin and addCheckout, which update the check-in and check-out dates, respectively.

## Defining a Selector:

```js
const guestsSelector = (state) => state.guests;
```

Selectors are functions that derive data from the state. Here, we’re defining a selector that returns the number of guests from the booking store.

Please go to PART 2 of this article form here..

Zustand for State Management PART 1


Something has always existed. According to physics, there can never be true physical nothingness—though there can be times when existence resembles nothing, such as a vacuum (the state of minimum possible energy) (Phys.org). Creating a space where there are no quantum fluctuations requires an enormous amount of energy, and there would be a remnant of that energy in that space afterwards if the fluctuations were flushed out, plus an unstable environment (1veritasium). Even on computers, deleted data is not actually tossed away, by rather written over.

# h1 Heading

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

## Horizontal Rules

---


## Emphasis

**This is bold text**

**This is bold text**

_This is italic text_

_This is italic text_

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

## Lists

Unordered

- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    * Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

4. You can use sequential numbers...
5. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Block code "fences"

```
Sample text here...
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


[What is .mdx](https://mdxjs.com/docs/what-is-mdx/)

Hearten Blogs

Zustand for State Management PART 2

Zustand for State Management PART 1

Sample document created using the .mdx format