fix: run focus effects after navigation transition #11770
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
I've been investigating why our app had turned slow and less responsive esp on older Android devices. Seemingly a navigation between two already mounted tabs should be near instant. I found that it only happened where we were doing side effects in
useFocusEffect
and I attribute it to both the introduction of automatic batching in React 18 and that the effects themselves might be taxing on the CPU and/or bridge.In this PR I change the behaviour of the hook when being reactivated (mount behaviour remains the same) to run just after the render update being committed by wrapping it inside a
setTimeout
. I had originally usedrequestIdleCallback
which seemed more correct, however it seems that function has had issues historically and might break on iOS for users on older versions of React Native, see facebook/react-native#28602. UsingsetImmediate
does not avoid the batching behaviour as IIRC the implementation on RN side will then not involve a native timer.Fixes #11613
Test plan
Verified on an enterprise app and updated unit tests to reflect the change.