react-native-performance.s
Owner: Louis Lagrange
Checks
In order to have an efficient application from the get-go, respect the following standards.
Why
Because a few seconds of page render, a laggy chart display or a buggy animation makes you lose customers, those tips will help you avoid that before it even happens. In order to have an efficient application from the get-go, respect the following standards.
General
Side note: You don't need to apply every of these standards right away (that would be premature optimization), but as your technical experience grows, you should adopt them along the way. These best practices are ordered by potential impact on performance.
Use an up-to-date version of your dependencies, and first and foremost:
Don't use images that are unnecessary big. Dynamic resizing is very inefficient on Android. Resize them to 1x 2x 3x flavors (
img.png
,img@2x.png
,img@3x.png
) and use them normally (require('img.png')
). UX designers can export images easily this way with Sketch.Use animations in order to make things more fluid (
animationEnabled
inTabNavigator
;LayoutAnimation
)Use
shouldComponentUpdate
/PureComponent
. Test thoroughly your component when usingshouldComponentUpdate
because this is error-prone. It will massively improve your app's performance though.Don't create new functions on every render, bind your functions efficiently. Similarly, avoid creating inline styles.
When using
Animated
, useuseNativeDriver
If you have a big view that has a lot of subviews, and these are not always shown to the user, use
removeClippedSubviews
When triggering a function after clicking on a button, or at
componentDidMount
, useInteractionManager.runAfterInteractions
Remove console logs from your production builds, use the
transform-remove-console
Babel pluginWhen possible, use
Fragment
instead ofView
Try to limit the number of data you display in charts, maps and tables. To investigate the potential impact, try to divide this number by 10 and measure the impact with the tools presented in the profiling section
Do not request your data to often: if it changes every hour, do not perform the same request every minutes, it will trigger useless renders and waste ressources.
Useless renders
Use
shouldComponentUpdate
/PureComponent
. Test thoroughly your component when usingshouldComponentUpdate
because this is error-prone. It will massively improve your app's performance though.Don't create new functions on every render, bind your functions efficiently.
Do not request your data to often: if it changes every hour, do not perform the same request every minutes, it will trigger useless renders and waste ressources.
Displaying large list of elements
Try to limit the number of data you display in charts, maps and tables. To investigate the potential impact, try to divide this number by 10 and measure the impact with the tools presented in the profiling section
If you have a big view that has a lot of subviews, and these are not always shown to the user, use
removeClippedSubviews
Technical debt
Use an up-to-date version of your dependencies, and first and foremost:
Remove console logs from your production builds, use the
transform-remove-console
Babel pluginWhen possible, use
Fragment
instead ofView
Start-up times
If your app takes too much time to initialize, solve the problem incrementally:
Add a splashscreen that closes when the app is ready with
react-native-splash-screen
If the startup time is > 2 seconds, show a full page modal with an animation (in the continuity of your splashscreen)
If the startup time is consistently > 5 seconds (or 7 seconds with an animated splashscreen): if you have a very big app, implement dynamic imports; if not, look for other clues: aren't you doing some long API calls at startup?
Good examples
Please andon and/or create an issue if you need one!
Bad examples
Please andon and/or create an issue if you need one!
Last updated