What is Zustand persistence and how can I use it?

What is Zustand persistence and how can I use it?

Zustand persistence allows you to save your state in local storage, so it persists even after a page refresh. You can use it by integrating the persist middleware.

Can you show me an example of how to implement it?

Sure! First, install Zustand and then use the persist middleware like this:

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}), {
  name: 'bear-storage', // unique name
}));

What happens if I change the state structure later?

If you change the state structure, you may need to handle migrations for existing data in local storage to avoid issues.