Out of Memory and large (IndexedDB) state

[MartinMouritzen]

I absolutely love Zustand. I have been porting my old app from Redux, and it's so much cleaner and nicer now.

However, I am hitting a few problems, and I am wondering what the best way forward is. I am making a podcast application, and the users visit a lot of podcasts. In the old app I would use localForage (also IndexedDB) to have a cache of podcasts, where each podcast had a key. When I wanted to read the podcast data I would read that cache, and after any changes save the cache again.

With Zustand I've tried to keep all those podcasts in a state.podcastCache object with their unique identifier as key. This seems to work very nicely. However I've recently started to get Out of Memory errors. This typically happens when I update the state often (even if no new content comes in) - eg. a simple change like updating state.podcastCache[uniquid].episodes[0].playedTime = currentTime;

So I am wondering a few options:

1. Is Zustand keeping all of the state in memory, and this is what's leading to the problem? (I can see in my developer console that the state in IndexedDB is 25MB).
2. Is 25MB too much for the state? I read online that IndexedDB can easily be several GB's, but I am unsure how large the state can realistically be before things start to go wrong.
3. Is this the completely wrong way to handle data like this, and should I go back to have a more normal cache layer outside of Zustand?

Basically, any advice or suggestions to solve this problem is very very welcome.

[dbritto-dev]

@MartinMouritzen would you mind provide us a minimal example? I would be happy to help

[MartinMouritzen]

Hi dbritto-dev,

I'll try to recreate a minimal example.

While I do that, I can tell you that after I used the memory logging too in Chrome's extension tool, that the main culprit was the customStore set function.

To use IndexedDB I had the following code for a custom store:
const storage = { getItem: async (name) => { return (await get(name)) || null }, setItem: async (name, value) => { await set(name, value) }, removeItem: async (name) => { await del(name) }, }

After removing "await" in setItem, it made things better. Where the app would crash within 10 seconds (with a large state) before, it now takes several minutes. It also now doesn't give the out of memory error, but instead I get "SBOX_FATAL_MEMORY_EXCEEDED". I am unsure what the difference is in Chrome.

I am still hypothesizing that the memory problems likely comes from the whole state being set every half second, even if I just update a small part of it, and that I probably need to move to a structure where I keep the cache completely away from the main state.

[dbritto-dev]

Keep me in the loop

[Wuuboy]

have the same issue, any suggestion?