Learnings

React Native is a relatively young platform. The community around it is still deliberating on best practices and the right way to do certain things. As a starting point, however, the official docs are the best resource we have come across. Here are some things we learnt along the way:

InteractionManager — This is your best friend when it comes to perf. There has been a considerable effort by the community to move expensive things to run on native threads since JS is single threaded. There are times when you need to do expensive stuff in JS without affecting the perf of your animations/transitions/user interactions. InteractionManager provides a nice scheduling API to defer this expensive stuff until after said animations/transitions/interactions have completed.

This is your best friend when it comes to perf. There has been a considerable effort by the community to move expensive things to run on native threads since JS is single threaded. There are times when you need to do expensive stuff in JS without affecting the perf of your animations/transitions/user interactions. InteractionManager provides a nice scheduling API to defer this expensive stuff until after said animations/transitions/interactions have completed. requestAnimationFrame — This one is borrowed from the web and works identically. A particular use case is the ripple effect on Android devices. The usual approach of using a TouchableNativeFeedback with an apt onPress handler does not always work here. At times, you might not see the ripple. Instead, if you wrap your onPress handler in a requestAnimationFrame block, you’ll notice the animations are visible perfectly.

This one is borrowed from the web and works identically. A particular use case is the ripple effect on Android devices. The usual approach of using a with an apt handler does not always work here. At times, you might not see the ripple. Instead, if you wrap your handler in a block, you’ll notice the animations are visible perfectly. MessageQueue — React Native works by communicating between the JS and native realms over a bridge. As a result, there is constant chit-chat over this bridge which can affect performance adversely if not moderated properly. The spy method on MessageQueue , as the name suggest, lets you spy on this chit-chat and see what’s being sent across. This might help you understand what’s actually happening underneath and improve performance.

MessageQueue.spy(true)

setNativeProps — From the official docs — “ setNativeProps is the React Native equivalent to setting properties directly on a DOM node”. At times, for reasons only known to you, you might want to manipulate the underlying native view that backs your JS view while short-circuiting the react render cycle. We used this only in a couple of places because everything else just did not work well enough. Avoid using it or use it very wisely if you must.

From the official docs — “ is the React Native equivalent to setting properties directly on a DOM node”. At times, for reasons only known to you, you might want to manipulate the underlying native view that backs your JS view while short-circuiting the react render cycle. We used this only in a couple of places because everything else just did not work well enough. Avoid using it or use it very wisely if you must. Structuring — From the get go, we followed a simple organization structure for our repo. We separated our dumb UI components from stateful views. State management was all taken care of in our epics and reducers. We observed that randomly scattered side-effect generating code becomes the bottleneck in keeping our codebase performant and testable. Our approach with redux-observable helped us mitigate some of those pains. Consider the following example:

We were able to contain most of the side-effect code in a single function rather than piggy-backing on component lifecycle methods. Also, we injected the side-effect making dependency — ajax in this case, into the function itself. This can be replaced by something that just mocks the network requests in a test environment.