Using Suspense alongside Zustand crashes the app

[sbboli]

Summary

Hi Folks, I'm running into a problem when using Zustand parallel with React Suspense in a NextJS app.

Minimal Example:

import { Suspense, useEffect } from 'react';
import { create } from 'zustand';

const useMyStore = create(() => {
  return { count: 420 };
});

export default function SuspenseAndZustand() {
  const store = useMyStore();

  useEffect(() => {
    // only crashes when setting the state here
    useMyStore.setState({ count: 9000 });
  }, []);

  return (
    <div>
      <p>store count: {store.count}</p>
      {/* works as expected when removing the suspense block */}
      <Suspense>Crash.</Suspense>
    </div>
  );
}

This causes the app to crash with:

Unhandled Runtime Error
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

When removing the (unrelated) suspense block, everything works as expected.

[dai-shi]

Is this behavior specific to nextjs or something,
or can it be reproduced with https://codesandbox.io/s/react-new ?

[sbboli]

The error can NOT be reproduced with react only.

Here is the failing next version though: https://codesandbox.io/s/holy-shape-br1uqs?file=/pages/index.js

If anyone had a workaround for this, I'd highly appreciated it.

[chin2km]

Can still reproduce this issue :(
using the React.startTransition to do the update to store doesn't help either!

[dai-shi]

https://codesandbox.io/p/devbox/holy-shape-br1uqs?file=%2Fpages%2F_app.js

It doesn't seem using Context. I'm not sure if it's the root cause. cc @dbritto-dev

[dbritto-dev]

As far I see, they are. They are using next with pages router

[dai-shi]

RSC is only effective with app router, isn't it?

[dbritto-dev]

@dai-shi you are right, I believe is SSR

[dbritto-dev]

@sbboli @dai-shi I was able to replicate the issue without zustand and useState , so is not something related to zustand

[dbritto-dev]

@dai-shi startTransition and useState works, but startTransition and zustand store does not work

[dbritto-dev]

@sbboli @chin2km would you mind following our nextjs guide? we are open to any feedback

[dai-shi]

@dai-shi startTransition and useState works, but startTransition and zustand store does not work

@dbritto-dev By "does not work", do you mean something like forcing sync render? In other words, does it work with use-zustand?

[dbritto-dev]

@dai-shi I mean that you get the error related to suspense, something interesting is that when you use useTransition instead of startTransition you get the same error on both, useState and zustand store

[dai-shi]

Thanks for clarification. So, it's SSR related.

[dbritto-dev]

@dai-shi yep, use-zustand works well, might be something related to useSyncExternalStore package

[dai-shi]

Oh, I see. Then, it's somewhat a known behavior.

[dbritto-dev]

btw, here you go -> https://codesandbox.io/p/devbox/cranky-tom-mjdcq8