setState outside react doesn't re-render

[Pulset]

I want to know the difference between create and createStore.I found that createStore doesn't re-render after setState.Am I right?
demo: https://codesandbox.io/p/sandbox/suspicious-artem-9k7vc9

[dai-shi]

create = createStore + useStore

https://unpkg.com/browse/zustand@5.0.0-beta.0/esm/react.mjs

(createImpl is create)

[dai-shi]

I wonder if @dbritto-dev 's doc revamp addresses it.

[dbritto-dev]

@AiSirachcha21 would you mind taking a look in the hooks section? We talked about create and createStore in the new hooks section

[ry-ku]

Right, I see it, but what I meant @dbritto-dev was (and maybe this is just me) it would be good to note all of these in one spot?

My confusion at first was basically "am I losing something if I choose to use a vanilla store instead of a react one" (pattern wise) cause the documentation shows you all these ways of getting the types to work correctly and how you can subscribe to state in the vanilla store and you have this constant thought process of "do I have to manage multiple patterns in order for me to use both of these"

Example.

I'm using Tanstack Router and inside this we have loader fn's

Now off the bat, you realize, I need access to a vanilla store object in order to access my state from the loader, but you realize you don't have one because it's a hook, so you reach out for createStore only to realize that you have to now export 2 things the vanilla store and the wrapper for useStore(customStore,selector) or use it directly in your component (the useStore hook, not the wrapper)

But then you realize by using create you get your custom hook but getState and setState are available on it bypassing "usual" hook rules. So, you can in fact use your hook in the loader with no repercussions as long as you're using those attached methods.

I'm suggesting that we could sort of co-locate this information? Because it feels scattered.

An idea for a "Creating your store" page

• Creating a Vanilla Store
• Creating a Store in React
• What's the difference between using "Vanilla store" vs "React Store" (this is where we would probably explain the use of syncExternalStore and how you make functions like getState and setState available?)

It feels like a lot for sure, but the information shared here basically gives a bit more insight on how you should use Zustand effectively imo.

[dbritto-dev]

@AiSirachcha21 actually to tackle that we need move away from the current nextjs setup but for now we are working on revamping docs

[dbritto-dev]

btw, the ones with the atom icon are the react ones and the ones without atom icon are the vanilla ones