Timers are an important part of an application and React Native implements the browser timers.
requestAnimationFrame(fn) is not the same as
setTimeout(fn, 0) - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).
setImmediate within a
setImmediate callback, it will be executed right away, it won't yield back to native in between.
Promise implementation uses
setImmediate as its asynchronicity primitive.
One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use
InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.
Applications can schedule tasks to run after interactions with the following:
Compare this to other scheduling alternatives:
The touch handling system considers one or more active touches to be an 'interaction' and will delay
runAfterInteractions() callbacks until all touches have ended or been cancelled.
InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced
TimerMixin. If you include
TimerMixin, then you can replace your calls to
setTimeout(fn, 500) with
this.setTimeout(fn, 500) (just prepend
this.) and everything will be properly cleaned up for you when the component unmounts.
This library does not ship with React Native - in order to use it on your project, you will need to install it with
npm i react-timer-mixin --save from your project directory.
This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.
You can edit the content above on GitHub and send us a pull request!