[ Question ] How to make a store instance per Component ?

let’s say you have a <Button /> component which some how stores it’s state in zustand with buttonStore store.

now you want each button to have it’s own state / store ( zustand store/state )

how would you achieve that ?

[drcmda]

it’s not 100% clear to me what you mean, but the store can be created everywhere, it doesnt violate rules of hooks because it is not a hook, it merely returns one.

it’s just that it’s now being the users responsibility to distribute it, because its not a global singleton any longer but has a lifecycle. this is where context is probably best. but you could also do prop drilling if you wanted.

store.js

const context = createContext()
const useStore = (selector) => useContext(context)(selector)

function Store({ children }) {
  const [useStore] = useState(() => create(...))
  return (
    <context.Provider value={useStore}>
      {children}
    </context.Provider>
  )
}

export { Store, useStore }

now every component inside Store can use the hook.

app.js

import { Store } from "./store"

function App() {
  return (
    <Store>
      <Foo />
    </Store>
  )
}

foo.js

import { useStore } from "./store"

function Foo() {
  const bar = useStore(state => state.bar)
  ..

and just like that we have a dynamic, component bound store that is lifecycle-safe. i guess we have re-created react-redux with the provider and all 😛

[boltcoder]

Funny thing -> I was using react context providers and then was context bridging to work with react-three-fiber. Then I moved everything off from context and moved to zustand. Life was good. Now I need multiple instances of my 3d component. So I need to provide the zustand store I create via contextproviders bridged between three-fiber’s canvas and normal react-dom. Thumbsup if you’re all coming full circle like me 👯

PS: I still love this library. You guys are great.