initial store state from props

[TkDodo]

I have a follow-up question on this issue, creating a new discussion as requested by @dai-shi.

We also have the use-case of passing in props into a zustand store synchronously, because the backend delivers them to us in some cases. The solution from @drcmda looks like it would work well:

function App(props) {
  const [[useStore]] = useState(() => create(set => ({ a: props.a }))

however, you would then only have access to your store inside this component. As far as I know, the general approach with zustand is that you export the useStore hook created with create, and then access it from wherever you want just by importing the hook.

How would you access this store created in your App component from a component in the sub-tree? Would it make sense to put the useStore hook itself into a React Context to make it available? Does that even work (I don't see why not, it's just a function, but who knows 😅 )

---

another approach might be to:

• create the store outside, as per usual
• spawn a useEffect on mount that sets the state for the store from props
• keep track of having the store initialized like that, either with an additional local state boolean or with an initialized flag.
• render null when not initialized, and render the children as normal when initialized.

That would add one (inexpensive) render cycle, but it's not really synchronous. If I'm using other hooks in App that depend on that data, they won't have it in the first render. Also, it would mean that I'd have to define everything as potentially undefined on type level, because when creating the store initially, I won't have those values.

---

Do you maybe have a "best practices" approach for this? I'm leaning towards 1), but one advantage of zustand over say redux is that you don't need a Provider, and with that solution, you would...

[dai-shi]

(I recently recommend use-constant for lazy stable one-time memoization, instead of useState.)

If you create a store with in a component (because of depending on props), and want to propagate it, then react context is the right solution.
However, passing a hook in context value has a pitfall. Unless it's not stable, we can violate rules of hooks.
To avoid the pitfall, we provide a special createContext in zustand/context. You can't violate rules of hooks with the special one.

The second approach would also work. It's a global store with 2nd pass initialization, so to say.

[TkDodo]

(I recently recommend use-constant for lazy stable one-time memoization, instead of useState.)

depending on the implementation of use-constant, it's very likely also just state:

const useConstant = (fn) => useState(fn)[0]

at least that would be my impl, of course you can also use refs.

---

thanks for pointing me to zustand/context. Am I right that this would be an ideal implementation then:

const { Provider, useStore } = createContext()

export useStore

const App = ({ children, ...props }) => {
  const createStore = useConstant(() => create(...))

  return (
    <Provider createStore={createStore}>
        {children}
    </Provider>
  )
}

I guess if you would import useStore and try use it outside of the context, you would get a runtime error?

[dai-shi]

oops, I meant this: https://www.npmjs.com/package/use-constant

---

Actually, if we are using zustand/context, we don't need use-constant, because it internally uses a ref, the same thing.

const App = ({ children, ...props }) => {
  return (
    <Provider createStore={() => create(...)}>
        {children}
    </Provider>
  )
}

I guess if you would import useStore and try use it outside of the context, you would get a runtime error?

yes.

[TkDodo]

Actually, if we are using zustand/context, we don't need use-constant, because it internally uses a ref, the same thing.

ah that's cool, thank you 👍

I think it would be good to outline in the docs that zustand/context is a good usage when you want to instantiate the store with some values you get as props. I can contribute that if you agree?

[dai-shi]

I can contribute that if you agree?

Sure! Please.
Just be reminded we prefer compact readme. If it gets long, please consider using <details>.

[TkDodo]

took me some time to figure out that we have to pass the generic to createContext instead of create, like:

const { Provider, useStore } = createContext<BearState>()

makes sense because useStore needs to be typed as well. Maybe I find a way to add that, too :)