onFinishHydration doesn't fire on render

[xringsupplyadmin]

Bug Description

I have a store that is using persist. In my project, I need to trigger an event automatically when the store hydrates because that event relies on the data in the store.

In the context persist.onFinishHyrdration() is provided which I assume is how you are meant to hook into that event.

However, the event does not fire on the initial hydrate when the page loads.

If using code like const stuff = useStuffStore(), stuff will initially be a default value from the create function before being populated by persist (from localstorage in my case)

Manually triggering a rehydration using persist.rehydrate() does caues the event to fire. Perhaps I am misunderstanding how the onFinishHydration hook works, but that is my understanding.

Reproduction Link

https://stackblitz.com/edit/stackblitz-starters-u8yakq1m?file=app%2Fpage.tsx

[dai-shi]

I guess, before you call persist.onFinishHyrdration(), the initial hydrate() is already finished. So using persist.rehydrate() sounds correct for your use case.

[xringsupplyadmin]

Ah, thats a good point. I dug around in the docs for a bit and added a log to the hydration itself in the persist and it shows that the hydration is already finished by the time the listener is added. For whatever reason, react still makes the initial render without the hydrated data but that is probably just a react thing, not a zustand thing. Something to do with server rendering I think but honestly I don't know. Thanks!

[xringsupplyadmin]

Would it be considered a breaking change to have the event listener called immediately on registration if the store is already hydrated?

[dbritto-dev]

if you don't want to use .rehydrate() everywhere you can create a custom hook for that

[xringsupplyadmin]

I'm currently using the code from the Next.JS setup guide for per-request stores https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-store

presumably I could just throw it in a useEffect there? I'm fairly certain it has to be in a useEffect because the persist object doesn't exist on the server.

[dbritto-dev]

@xringsupplyadmin here you go https://stackblitz.com/edit/nextjs-and-zustand-persist-snefbl8b?file=README.md

[xringsupplyadmin]

I see. Is it possible to push that effect up into the useStore or is that inadvisable?

[dbritto-dev]

@xringsupplyadmin that goes to user land