What is Zustand and how do I use it in my React app?

What is Zustand and how do I use it in my React app?

Zustand is a small, fast state management library for React. It allows you to manage state without the boilerplate of Redux. You can create a store using create from Zustand and then use it in your components.

Can you show me a simple example of how to set it up?

Sure! First, install Zustand with npm install zustand. Then, create a store like this:

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

You can then use useStore in your components to access the state and actions.

How do I access the state in a component?

You can access the state in your component like this:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

This will display the count and allow you to increment it.

Can Zustand be used with TypeScript?

Yes, Zustand works well with TypeScript! You can define your store with types to ensure type safety.