How to cleanup store on component unmount?

I couldn’t find a way to cleanup my store on component unmount. I’m using the Zustand way mentioned in the docs for handling stores with createTrackedSelector, but it seems like this hook keeps the reference to the store forever without providing a way to avoid memory-leaks.

const useMyStore = createTrackedSelector(MyZustandStore)

const MyComponent = () => {
  const store = useMyStore()
  useEffect(() => {
    return () => {
     // how can I destroy my store on cleanup?
   }
  }, [])
  return <button onClick={store.increase}>{store.count}</button>
}

calling MyZustandStore.destroy() doesn’t help; neither does re-assigning the store with another value.

[dai-shi]

That will become like a local state, but something like the following.

export const useZustandStore = (
  storeFactory
) => {
  const ref = useRef();
  if (!ref.current) {
    const useStore = storeFactory();
    const useTrackedStore = createTrackedSelector(useStore);
    ref.current = useTrackedStore;
  }
  return ref.current;
};

I used useRef instead of useState, because it’s slightly more lightweight.

[Sinakhx]

This is nice. Thanks for sharing!