REACT NATIVE APP OPTIMIZATION
A short guide to React Native app optimization
There’s no miracle pill when it comes to React Native performance. Still, it’s always easier to fix the problem, when you know what causes it.
As it happens, the first of recurring mistakes might lie in focusing on every detail of a puzzle at once. Getting your hands on a slow Android device might be helpful – just install your app on it and do a test run to find out what does an average user do most, or what might be crucial for user experience.
In case you’re not getting enough speed, rendering components with data not being fetched, or even removing them altogether usually helps to establish the reason why. Also, you may find some benefits in using a stopwatch on a React Native debugger every time you do an optimization as it helps to test and measure your change. With a little assistance from react-native-bundle-visualizer, as the name suggests, you can build you app-bundle and determine the rough points. If something stands out, this tool will put a spotlight on it.
Did you ever notice that Facebook or Instagram load only the bare minimum? That’s called progressive loading. Anything that is not crucial for a given user gets delayed in favor of the most important stuff. If what we’re looking for is essentially more gain and less pain, you might try using software like ImageOptim to automate the whole process of optimizing your assets. The following is not a physical tool, but an approach rather - try to dynamically import areas of dependencies, or simply load only what you need when you need it, which sounds a lot easier and not as cold.
Animations can become a serious spanner in the works of JS-thread performance. It won’t hurt to peel through them to reduce the lags and overall slowness of the app.
All hail the open-source! It’s no big secret, that even large IT companies can’t stand up to big open-sourced projects in terms of performance. Baring in mind the knowledge and range of devices of possible contributors, it might be a bright idea to open-source your app.
Last but not least. Optimizing itself is a slow and demanding process. But getting into in paves the way to understanding the inside of how React works. Thanks for reading!