To what extent are multiple calls on the same tick batched?

[trickeyd]

Hello!

I'm a seasoned React user but I have just taken on my first codebase which uses SWR and I could use a little help.

The project was on 0.1.6 when I started, but I have upgraded to 0.2.3 (as it was the last version that still used the pages hook). I intend to update to the latest when I can but one refactor at a time...

My question is to do with how calls are batched, as we currently have many calls being done on some ticks. The useSWR hook is used very liberally throughout the codebase, and very often with both key and fetcher which triggers the call.

I can see that if a component and its child (for example) are mounted and both use this hook, they wont both trigger the fetcher, so I imagine there is some sort of flag. The codebase also uses mutate to trigger revalidation at points so I wondered if there is a separate flag for that which leads to multiple calls per tick...
I did think I had seen more than 2 on some ticks but I'm not sure I was logging the clicks properly at that point, so can be taken with a pinch of salt.

I have my head in your code too, but if anyone has the time for a brief summery of this I'd be very pleased.

Currently my strategy to reduce calls is make sure mutate (as revalidate) is used sparingly and is better controlled, and I'm trying to figure out when the second 'fetcher' arg is passed but not needed.

Many thanks!

[trickeyd]

I went through and made all the revalidations much harder to trigger and it has made a huge difference, so they are obviously pretty forceful when triggering a fetch (which makes sense). The previous dev was trying trigger on certain lifecycle event (rather than using the SWR options). He did it badly, but I think I can see why he did it which brings me to another question...

We are using react-navigation 5 (this is React Native BTW) and it seems that the revalidateOnFocus option does not work as expected with the focus event that react-navigation is using. Now I see the problem I can implement a better solution, but is this a know thing? (remember I'm on 0.2.3)

I'm guessing react-navigations focus is not the same as the general react/dom focus at all. In which case I'll create my own wrapper hook to handle this.

Thanks again in advance for your help!

[sergiodxa]

Focus only works in React DOM not React Native right now, as far as I remember.