Hybrid in and out of content usage

[Morgandri1]

Hello!
I'm using react zustand v5, and i'm running into some issues with accessing my store outside of component content. The standard react 'no hook usage outside of component functions' error and all that jazz. My understanding from previous issues is that there isnt a great way to interop the two... any pointers for v5?

[dbritto-dev]

@Morgandri1 you could use createStore instead of create

[Morgandri1]

Hey dbritto,
Thanks for the advice, but i'm receiving the same error. is there a difference in how i need to reference the store outside of react than the standard hook?

[dbritto-dev]

@Morgandri1 would you mind sharing us a minimal repro on stackblitz?

[Morgandri1]

To be honest, I'm not sure how to replicate the functionality without the full repo, but I can add some detail:

I have 2 stores created with createStore; one Client context which stores my Client class instance which interacts with the server over websocket, blah blah blah. This context is working as expected.

However, when trying to use my Cache store by using useStore(cache) in the websocket response listeners, I receive a react hook error on response when trying to set the cache. It seems like loading the cache is working okay but it's unclear. However, setting the cache content is the main functionality I need in the response listener.

[dbritto-dev]

@Morgandri1 that's totally expected, you can't use useStore outside of React, you need to use the store itself.

const someStore = createStore(...)

// Inside of a React components/hooks
const SomeComponent = () => {
  const someFunction = useStore(someStore, (state) => state.someFunction)
}

// Outside of React components/hooks
const { someFunction } = someStore.getState()