Speed up your React Native app using this react-navigation hack

My React Native app has reached over 200 components and my redux store combines 15 reducers at the moment. This has led it to become a bit slower than I like. Among other things, I have started using reselect and shouldComponentUpdate() to reduce the number of renders in my app.

The most effective trick though also requires the least amount of work. The problem when using react-navigation is that views that are currently not visible get rerendered off-screen nonetheless.

In my tab-based application, the settings view is slow to respond to touches because the main view is re-rendering, although it is not even visible! I want to prevent re-renders while the tab is not focused.

Preventing the re-rendering of the main view which is not visible

Fortunately, this is pretty easy to accomplish using react-navigation’s withNavigationFocus. This is the code that I am using:

Assuming all your components are free from side-effects, you should not see any problems. The rendering gets suspended if the component is not visible and the layout gets updated if you switch back. I have also used hoist-non-react-statics , that way your static properties like navigationOptions don’t break!

I have extracted this function into it’s own npm package: render-when-focused.

These performance gains have never been this easy! 💪