fix: run focus effects after navigation transition

[oblador]

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 used requestIdleCallback 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. Using setImmediate 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.

[github-actions]

Hey @oblador! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (573d0b8) 76.73% compared to head (8f30046) 76.74%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11770   +/-   ##
=======================================
  Coverage   76.73%   76.74%           
=======================================
  Files         207      207           
  Lines        6103     6105    +2     
  Branches     2385     2385           
=======================================
+ Hits         4683     4685    +2     
  Misses       1368     1368           
  Partials       52       52           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	8f30046
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6597d44d557fdd0008fb80cd
😎 Deploy Preview	https://deploy-preview-11770--react-navigation-example.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[santosdmg]

I was changing a state in a custom hook, however I had that deley when changing the state, I solved it by adding a setTimeout to change the state, Example:

const [isActive, setIsActive] = useState(true);

const subscribe = () => {
  setTimeout(() => {
    setIsActive(true);
  }, 300);
};

const unsubscribe = () => {
  setTimeout(() => {
    setIsActive(false);
  }, 300);
};

useFocusEffect(
  useCallback(() => {
    subscribe();

    return () => unsubscribe();
  }, [])
);

[sirusbaladi]

any update on this? this is needed.