When it comes to optimizing React-Native Apps there are times when you have to maintain the flow of your business and make the optimization as much as faster in possible time, this will be my guide to optimize your Apps with the best practices.
- Rendering Lifecycle
React Native will take care of rendering the application, but you have to define the components for the final interface out of these building blocks & that's how you do it the normal way, without caring about the Rendering Lifecycles. In short too many render cycles will result in slower apps with latency on the devices, to solve this problem you have to work with a different approach. The rules are simple, a component can re-render if the parents are re-rendering & which means the ‘render’ method can run without changing the props, as changing the preview and current props will take way too long.
How Too Much Render Cycles Affect Your Apps:
- Performance problems especially on Low-End Mobile Devices.
- You will experience flickering UI with frame drops (an animation with an update coming along).
As soon as you are getting these symptoms in your App it's the right time to work in the Rendering Lifecycles.
How To Optimize
The most simple solution that I can suggest is to use pure components when needed, you can have a better understanding of the example given below.
So almost every React Native application consists of a ‘TextInput’ that is controlled by the component state, so in the above code almost every device will work properly without giving any errors but as we are optimizing our app, we have to make sure that it works on slow devices as better as we have on faster Mobile Devices, you will face the situation when the user types really fast and causes problems with view updates.
For a better understanding let's break it further into smaller parts.
If you are familiar with the Asynchronous nature in React-Native you will easily get that, as the user types and populates the ‘TextInput’ with new alphabets and update is being sent to React-Native via the onChangeText prop & set the state calling setState, later a controlled component syncs the JavaScript value with the native component value. These operations are simple, unless when the user is going to type a really high rate when the text ‘TE’ flickers and becomes ‘T’ during the update process.
To solve this problem we can remove the value prop from our code & make the data flow one way only eliminating the issues described and after making some change in your lines of code it should look something like that.
After making these changes your application will need less amount of users devices battery usage as it will make the user’s satisfaction even better after all.
Read the full post at : https://medium.com/javascript-in-plain-english/my-ultimate-guide-to-optimize-your-react-native-apps-757e9a818b0c
Top comments (0)