Very weird behaviour I can't reproduce in a new stackblitz environment

[guenyoo]

I have a project in which I need to use Zustand in Vanilla JS and also in a React context.

I have a store, like this:

import { create } from 'zustand';

interface CompareProductsStore {
  itemsToCompare: string[];
  flapShown: boolean;
}

const itemsFromStorageInitial = getFromLocalStorage({
  name: LOCAL_STORAGE_ITEMS.COMPARE_PRODUCTS,
});

const initialState: CompareProductsStore = {
  itemsToCompare: itemsFromStorageInitial ? JSON.parse(itemsFromStorageInitial) : [],
  flapShown: false,
};

// Define your store and state updates/actions
const useCompareProductsStore = create<CompareProductsStore>()((set, get) => ({
  ...initialState,
}));

export { useCompareProductsStore, type CompareProductsStore };

I have React components, that have a button and once that button is pressed, 3 things happen:

1. Something is written to localStorage
2. The state is updated accordingly and one item is added to itemsToCompare in the store
3. based on the number of items, a flap will be shown which will open a Sidebar

That Sidebar will create a new React Root and mount a React Component. Said React component will display the items that are marked for comparison.

Adding items to itemsToCompare works like a charm and also the flag is being set nicely. On that end, everything seems to work fine. My problems arise with the newly mounted React Component. When I try to access the Store, the array is empty in the beginning. (Actually, it's empty when nothing was in store and I clicked something into itemsToCompare, that change is not registered).

I can't reproduce this bug in Stackblitz, even though I tried and it should basically be the same as in my project, at least abstractly:
https://stackblitz.com/edit/vite-react-ts-9nejkg?file=src%2Fvanilla.ts,src%2Fmount-react.tsx,initial-compon

What I notice in my project, is, that the vanilla file seems to have its own values that somehow don't match with the values of my React component.

I'm not sure how to progress, as I can't replicate all of the project. It's a massive monolith.

Can you guys help? This seems to be a very intricate problem and I'm sure the devil is in the details.

Same store, different values.

Edit: in the screenshot, the first array log should be the content of the second console.log at position itemsToCompare.

[dai-shi]

Can anyone help??

[guenyoo]

@dai-shi I've narrowed the problem down. It seems, that for whatever reason, in our project files create a second instance of the store instead of accessing the one that was already created. I've found this out by implementing zen-observable-ts and basically observing the same issues.

So, this seems not to be related to your package. Sorry for the confusion. I'll close this discussion.