Zustand state updates across pages in Next.js App Router

[devevignesh]

I'm using Zustand with Next.js App Router and encountering an issue where state updates in one page are not reflected in other pages that use the same store. Specifically, updating the inflationToggle state in one page doesn't trigger updates in other pages subscribed to the same state.

I've implemented the store following the documentation for Next.js integration

I'm using this store in multiple client components, each marked with 'use client':

accumulation-phase.tsx
https://github.com/devevignesh/wealthbuildr/blob/master/app/accumulation-phase/page.tsx#L172

growth-phase.tsx
https://github.com/devevignesh/wealthbuildr/blob/master/app/growth-phase/page.tsx#L187

When setInflationToggle is called in growth-phase.tsx, the state updates locally but accumulation-phase.tsx doesn't reflect this change. It seems that each page might be getting its own instance of the store, contrary to what I expected.

App - https://wealthbuildr.vercel.app/accumulation-phase

Is this behavior expected when using Zustand with Next.js App Router?

I've reviewed the Zustand documentation for Next.js integration, but I'm unsure if there are additional steps needed for the App Router specifically. Any insights or guidance would be greatly appreciated.

Thank you for your time and assistance!

[dbritto-dev]

@devevignesh everything looks good to me, I don't see the behavior that you are talking about

[devevignesh]

Hey @dbritto-dev, thanks for looking into this. When navigating to the Growth tab, which is a separate route, and toggling the inflation switch, the "Accumulation Phase" value is not updating. I have subscribed to the inflationToggle state to trigger a re-render of the page when it changes, but it's not working as expected. Could you please check the attached file?

Wealthbuildr-Your-Journey-to-Financial-Abundance.webm

[dbritto-dev]

@devevignesh the inflationToggle is working as expected as far as I can see. The issue would be the computedData

[devevignesh]

okay, I will look into my function computedData and get back to you if needed. Thank you.