React navigation jitter / InteractionManager.runAfterInteractions

[kelleyvanevert]

Hey!

I recently started using react-query for my new react native app. Working super great, but I'm starting to run into a jitter effect on navigating between screens with the react-navigation library.

I previously fixed a similar jitter effect in this app by optimizing a custom event bus context that I'd been using. This event bus could indirectly trigger a bunch of rerenders of the components that listened to it. I fixed it by wrapping the listener notification loop with InteractionManager.runAfterInteractions.

I haven't dived deep into this issue yet, but I can imagine that one or two well-placed InteractionManager.runAfterInteractions wrappers (or something similar) could solve this issue for more people to come. Maybe there's some obvious cache write / read bottleneck?

(Of course the codebase would have to detect whether there even is such a thing on the platform being used, but React Native is super popular, so I think that might be worth the effort.)

[tannerlinsley]

I'd have to understand in better detail what's going on before I can recommend a way forward.

[kelleyvanevert]

For sure. When I get around to addressing this issue, I'll post an update! :)