zustand: 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 😃

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 19 (8 by maintainers)

Most upvoted comments

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

dai-shi on Oct 20, 2020

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 !

thomasgosse on Oct 21, 2020

@worstpractice

https://reactnative.dev/docs/fast-refresh

It’s very good to know. As I understand, @refresh react is not only for RN. I wasn’t able to find a document though.

BTW, the issue in zustand is not force refreshing. It’s the other way around.

dai-shi on Jan 1, 2021

I have to chime in by just mentioning that zustand and fast refresh has worked flawlessly for me in my current Expo project.

I’m using the managed Expo workflow, not bare or ejected.

It’s a greenfield project, and daily development has been ongoing for a little over two months now.

There are some pitfalls to be aware of when using fast refresh, but they can be avoided, as I have.

For example, exporting anything but one (1) functional component from a single file drastically changes how fast refresh behaves. As do the mere existence of class components, and so on. Fast refresh can be quite a different experience depending on how you import and export things.

I also happen to use the react native debugger, and have not run into any issues with it. Though I must be clear: I have barely had to use the debugger thus far, simply because no bug has been evasive enough to demand I use the debugger (fingers crossed that this state of affairs can last).

Zustand and fast refresh are in use every second of development, however, and both have worked as expected for me thus far. Certainly Zustand has not had even a single issue (as far as I can tell).

I’m developing exclusively on Android physical devices for now. I take care to never have the debugging mode enabled without having an extremely good and specific reason, because just having remote debugging enabled in the device basically (for all intents and purposes) changes how everything works in React Native. It is also much slower.

One piece of advice I always have for any React Native project is to clear the transform cache at every “yarn start” (or similar). By default, incorrect state survives CTRL+C:ing the bundler and restarting it.

I avoid bugs every day by having a start script that reads: “expo start --clear”.

BrowserStack also maintains a list of all the things in React Native that are completely different in the iOS simulator, versus a physical device. Do not trust the simulator for anything critical, I must warn.

I am using zustand 3.2.0, expo 40.0.0 and react 16.13.1.

worstpractice on Dec 29, 2020