React Native fast refresh problems

Hi !

I’m using Zustand v3 with React Native and everything works great. Troubles comes when I hit save and app is fast-refreshed: my store is emptied and no update is trigger anymore after that. The only way to make this work again is to reload the whole app. This weird behavior appears only when I hit save on my useStore file (which create store with create())

I’m doing something like this:

// App.js
const App = () => {
  const getLists = useStore((state) => state.getLists);
  const lists = useStore((state) => state.lists);
  useEffect(() => {
    getLists();
  }, []);
 
  console.log(lists);
  ...
}

the getLists method:

  // useStore.js
  getLists: async () => {
      const lists = await getLists();
      set({ lists });
  },

the addList method:

  // useStore.js
  addList: (list) => {
      const lists = [...get().lists];
      lists.push(list);
      set({ lists });
  },

So if I save my useStore.js, fast refresh comes in, and then if I try to add with my addList method, console.log is not called because the component is not rendered any more (but I think it should because I updated lists). I confirm that this experiment works when I’m not using fast refresh of when I’m not saving useStore.js (console log is called so App is re-rendered).

Let me know if you need more information or a RN repo to reproduce this !

Thanks for this nice library btw 😃

[dai-shi]

Yeah, let’s leave it open for a while. Thanks for your reporting anyway!

[thomasgosse]

I created a repo with the weird behavior: https://github.com/thomasgosse/RNFastRefreshZustand

You can try it both on iOS and Android. I put instructions on src/components/hooks/useTheme.js Keep in mind that this happen only when you hit save on the src/components/store/useStore.js file !