Troubleshooting
a slow app
A practical guide
to great React Native performance
Paris - London - New York
Jean-Rémi Beaudoin
@jiherr
https://www.meetup.com/React-Native-London/
Troubleshooting
a slow app
A practical guide
to great React Native performance
Not quite...
The app feels slow overall
(because it is)
Measure!
- Find the low hanging fruits
- Beware of time wasters
- Feel the pain of your actual users
Which measure?
- FPS
- Janky frames
- Load time
- Flame chart
- CPU usage
- ...
Janky frames
-
Pick a key user journey
-
Use an Android test device
-
Plug it in your computer
-
Start the app
-
Run through the journey
adb shell dumpsys gfxinfo com.example
Janky Frames
time
Performance of key user journey
20%
Performance must be part of your team culture
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Identify bottlenecks
Usual suspects
-
Premature optimisation is a waste of time
-
Do not guess which part of the code should be fixed
-
If you have an intuition, measure it!
-
If you don't have a clue, read the ... amazing manual ❤️
https://facebook.github.io/react-native/docs/performance
Available tools
-
why-did-you-update
-
Chrome debugger's flame chart
-
React Devtools' Profiler
-
Firebase performance tracking
-
framestats
-
systrace
-
...
why-did-you-update
Spotting issues with flame chart
Spotting issues with flame chart
Upgrade
React Native
Our performance journey
time
Performance of key user journey
38%
Janky Frames
Our journey on Smarkets
time
Performance of key user journey
38%
19%
15%
Janky Frames
It is easy to stop caring...
Other takeaways
- Use Redux with care (and with reselect)
- Linters can prevent patterns that impact performance negatively
- No bridges to the native world were needed in our case
Wrap up
Optimising performance is an Engineer's drug.
Make sure you often
take a step back:
Am I actually making a difference for my users?
Measure it as a team!
Vielen Dank! 🙏
Jean-Rémi Beaudoin
@jiherr
Paris - London - New York
Troubleshooting a slow app, a practical guide to great React Native performance
By jrbeaudoin
