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:

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!