Zustand persist (JSON.stringify) performance

[MartinMouritzen]

First of all, thanks for the best stage management tool. ❤️

My team is using Zustand for a whiteboard app, and on some boards we have A LOT of nested elements. Zustand mostly handles this fine.

The problem comes when we modify state often. An example could be dragging with the mouse to select and having a "selected" property on each element on the board - this could change many times in a second, and the app clearly starts lagging here. I have debugged it to be the persistence in Zustand. We use idb-keyval and at first I thought to debounce setItem - but that didn't solve anything. Then I tried to create another middleware before that, but the problem was the same. I have now pinpointed it to be the JSON.stringify that happens before the persist middleware is even called.

Now my question: What would be the best way to solve this?
The only solution we can really think of right now would be to not use the persist middleware (which completely removes the performance bottleneck), but then saving state every 1-2 seconds if there's any changes, which we deem would probably be an okay user experience. But we are VERY open to other and better ways to solve this.

[dbritto-dev]

@MartinMouritzen what about using debounce or throttle or useDeferredValue (https://react.dev/reference/react/useDeferredValue) ?

[dbritto-dev]

@MartinMouritzen are you using debounce from lodash?

[MartinMouritzen]

Pardon my late answer, I was on a weeks vacation :D @dbritto-dev yes, I tried that and a more homegrown solution, but it doesn't seem to be that area that causes the problem. Even if I don't actually run the set function at all, having the persist middleware slows down the app.

[g-a-v-i-n]

I have this same problem and am wondering if there is a way to slice my entire state into key paths like 'foo.bar.baz' and assign each to a row in IDB. Wondering if anyone tried doing something like that? Do you think that would result in better perf?

[AlexanderMoroz]

Have same issue. Trying to persist drawing dots in storage with default storage and it becomes sluggish very quick. I think solution is to make it async and avoid using JSON.stringify, I'll update this thread if I found a solution.

If I disable our drawing by using partialize middelware presence of the middleware doesn't not slow down application, so I assume problem somewhere in a synchronous saving

[AlexanderMoroz]

Hmmm.. Seems using async storage with indexdb helped a lot.

import { del, get, set } from 'idb-keyval';

const asyncStorage: PersistStorage<
  MyState
> = {
  getItem: async (name) => {
    const state = (await get(name)) as MyState;
    return { state };
  },
  setItem: async (name, value) => {
    await set(name, value.state);
  },
  removeItem: async (name): Promise<void> => {
    await del(name);
  },
};

and use it as storage property in config for middleware