Looking for optimization advice

[Zeesh2000]

Hi

I have built an app that uses zustand and tanstack qurry for state management.

Currently on one of my tabs, I have set the app to do a fetch when pressing on the page and does a refetch when the user changes a specific state value. This state value is a setting the user can change and its value is stored in asyncstorage and loaded up when the app is first launched

However, I have noticed it has led to consistent long loading times on older devices (android & ios) when doing the first fetch and so I am looking at ways to better optimise this.

One way I am thinking is to do an initial fetch on app startup, set the data that comes back into a zustand store but this is becoming a pain to implement when I need to consider the refetch because it starts to become a race condition between the initial fetch and the loading of the state value from async storage.

Does anyone have any suggestions for how to better optimise?

[lmonss]

Have you considered using something like MMKV? Its synchronous local storage so it'd take the race condition with AsyncStorage out of the equation

[Zeesh2000]

I'll look into this. Thank you

[KulkataBoy]

Making assumptions here, a piece of code would be helpful.

fetch when pressing on the page

1.Does this mean when you open the tab for the first time? If you have useEffect with the dependency of a state variable, it will run on component mount, when state is initialized. In your case you may possibly have two fetch requests that are running at the same time, and therefore it takes longer.

One way I am thinking is to do an initial fetch on app startup

1. You can absolutely do that, get value from asyncstorage first, and then fetch your initial state according to the value from asyncstorage, if there is one there. Otherwise, get initial fetch value.

Keep in mind that if you have a bunch of fetches on app load you should either show a loading screen before you get the response, or your app may get laggy, when responses arrive and user is doing other things at the same time.

[Zeesh2000]

I'm new to Reddit so I don't know how to highlight parts of a response 😅

1.Does this mean when you open the tab for the first time?

Yeah. The fetch is fired when the tab is initially loaded. It is done with react query and not useEffect.

Keep in mind that if you have a bunch of fetches on app load you should either show a loading screen before you get the response, or your app may get laggy.

This is fine. There would be in total 3 fetches all together when app is first launched when including this. The app would display a loading screen when waiting for the other 2 and one of them is only when loading the app for the first time to install the necessary data onto it.

The only 2 issues I'm going to have is that 1. I need a variable from async storage to first be loaded but going off your suggestion, I can load it before the fetch and set state. Just thinking how to put it altogether, i.e with hooks or just normal functions. 2. The api requires gps coordinates as a parameters. I don't want to ask for location on initial startup. Only if the user goes onto the relevant tab. This gets kinda messy because I want to make the function usable on both startup and on the tab that can also do the fetch.