Context store will get reseted when parent component re-renders

[gsouf]

Hi,

I'm playing with store in a context as per this documentation https://docs.pmnd.rs/zustand/guides/initialize-state-with-props associated to this codesandbox: https://codesandbox.io/p/sandbox/4jn1e2

I found that if the component where the provider is used re-renders then the whole store will get reset. To illustrate this I forked the code sandbox above here: https://codesandbox.io/p/sandbox/practical-lena-llnwz5

I added a useState in the App component and a button "Update state" to update the value of this state. If you start incrementing the counters, then when you click the button in order to update the state, then you will see that the counters will reset to 0.

Is that a bug or is that intended?

Thanks

[gsouf]

Figured it out.

The reason is that the context provider is creating a new store within the render method:

const MyProvider = ({ children }: { children: ReactNode }) => {
  const store = createMyStore();
  return <MyContext.Provider value={store}>{children}</MyContext.Provider>;
};

Memoizing the store will do the trick:

const MyProvider = ({ children }: { children: ReactNode }) => {
  const store = useMemo(() => {
    return  createMyStore();
  }, []);
  return <MyContext.Provider value={store}>{children}</MyContext.Provider>;
};

[dbritto-dev]

@gsouf the right way to do it is by using useRef instead of useMemo

Ref: https://docs.pmnd.rs/zustand/guides/initialize-state-with-props

[gsouf]

@dbritto-dev I can see that now,

  const store = useRef(createBearStore()).current

But it seems to be a react anti-pattern, isn't it? Unless I'm missing something useMemo seems to be the right tool for this purpose. Also, it might be working with useRef, but it seems that the function createBearStore will get re-evluated uselessly everytime the component re-renders.

[dbritto-dev]

@gsouf No, is not. Actually react recommends to use useRef in order to create one instance in a stable way

So should be something like this:

cons storeRef = useRef()
if (!storeRef.current) {
  storeRef.current = createStore(...)
}

Btw, we should update the docs since using useRef like below is wrong, because even if you get only one store you are calling createStore on each render

const store = useRef(createStore(...)).current

Ref: https://react.dev/reference/react/useRef

[gsouf]

@dbritto-dev that was my whole point. The doc here was actually not doing it right. Could you please point me out to where react recommends using useRef rather than useMemo in such a case? I don't see any mention that useRef would be more stable that useMemo. Unless there are specific requirements, in which case one of useMemo or useRef would be more appropriate, to me it seems that in this situation the two approaches are pretty much equivalent.

Not that I want to be picky or whatever, it's just that you're pointing out something and I would like to understand the reasoning behind it.

[dbritto-dev]

@gsouf sure, you can react more about that here https://react.dev/reference/react/useMemo

but basically memo can throw the cache resulting on calculating the value again or in this case recreating the store again, on dev mode react can throw the cache for different reasons for instance new changes on a file

That's why they recommend stable variables or refs