Increase React Native App Performance

Author - Webner
2.06.2021
|
0 Comments
||

React Native apps have numerous benefits like they are fast, cost-efficient, and offer a nearly native look. But, when it is not done properly, it can lead to performance issues.
So, while making you react to native applications, developers need to be aware of the most common performance issues and their effective solutions. All the points are listed below:

  • Use of console.log statements in React Native:

    The use of console.log statements is one of the most common methods to debug the apps. But, when you run a bundled app, these statements cause a big bottleneck in the performance.
    One possible solution is to use a third-party package called “babel-plugin-transform-remove-console” that automatically removes all console.* calls in the release versions of your project. To install this package, just run the below command in a terminal:
    npm install babel-plugin-transform-remove-console
    After that, edit the .babelrc file in your root folder like:
    {
    "env": {
    "production": {
    "plugins": ["transform-remove-console"] }
    }
    }

  • Don’t use Scrollview to render a large list of data

    ScrollView renders all children at once and it is good when you have a small list to render. Dealing with a large amount of data can directly affect the performance of the app. In flatlist, the items are lazy loaded so the app does not consume an inconsistent amount of memory. If your FlatList is rendering slow, be sure that you’ve implemented “getItemLayout” to optimize rendering speed.

  • Use an Image Caching Solution

    The efficiency at caching images in react native is to use a third-party package called “react-native-fast-image”. React Native itself offers an “Image” component that caches images like web browsers, which is sometimes the cause of some issues like rendering a lot of images on one screen, low performance in general, low-performance loading from cache. “FastImage” is an “Image” component replacement that solves these issues.

  • Avoid unnecessary renders in React Native App

    React.memo() is the one optimization technique to avoid unnecessary renders. React.memo() is used to handle memoization which means if a component receives the same set of props more than once, it will use previously cached props and skip the next rendering.

    For example:
    // Main.js
    const Main= () => {
    const [count, setCount] = useState(0);
    return (
    <View>
    <Button title=”Increase Count” onPress={() => setCount(count + 1)} />
    <Child text=’Some text' />
    </View>
    );
    };
    //Child.js
    const Child = React.Memo(({ text }) => {
    return <Text>{text}</Text>;
    });

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *