CODEWITHSUNDEEP
react-native
iamkanaramyadav
iamkanaramyadav

Reputation: 151

How to improve performance a react native application

React Native Application for Android

I'm already applying things like

Removing console logs.

  1. No inline styles.

  2. Not calling setState on an unmounted component.

  3. Use Flat list to render data.

But that's just not enough, build to the Android one. There's a huge performance gap, unfortunately.

Upvotes: 3

Views: 516

Answers (2)

Leandro Ariel
Leandro Ariel

Reputation: 1381

This only works for ANDROID & react-native > 0.68.x

When building your android app locally, by default you build all the 4 Application Binary Interfaces (ABIs) : armeabi-v7a, arm64-v8a, x86 & x86_64.

However, you probably don't need to build all of them if you're building locally and testing your emulator or on a physical device.

This should reduce your build time by a ~75% factor.

If you're using the React Native CLI, you can use the --active-arch-only flag together with the run-android command. This flag will make sure the correct ABI is picked up from either the running emulator or the plugged in phone. To confirm that this approach is working fine, you'll see a message like info Detected architectures arm64-v8a on console.

npx react-native run-android --active-arch-only

or

yarn react-native run-android --active-arch-only

Upvotes: 1

Irfan wani
Irfan wani

Reputation: 5065

There are a lot of ways and steps to improve the performace of a react-native app.

  1. You should use React.PureComponent (if using class based components) to define your component instead of React.Component. It does a shallow comparison of props and state and only re-renders the component if it has changed.

If using functional components, wrap your component in React.memo which does a similar thing as React.PureComponent in functional components. Do the same for the component used in renderItem of Flatlist.

  1. Not mutating data (props and state) instead create a copy and edit that. More details here

  2. While importing some module or anything from other file, make sure to import only those things which you need instead of importing everything.

wrong way (except if you need everything or it is a required condition to use some other api);

import * as everything from 'path/to/some/file'

right way;

import {firstthing, secondthing} from 'path/to/some/file'

  1. As you mentioned Flatlist, you should also decrease the number of items to be shown on the initial render to make the response fast by using initialNumToRender prop.

  2. If using animations, try to use native driver by setting useNativeDriver={true} on the animation view (if possible). This will run animations smoothly and they will not get blocked by the js thread.

  3. Try reducing the size of the app. If you have something in your app which you are not using, remove that.

e.g, if you are using expo, but your app doesn't use that much from expo, like expo APIs and other features, better to eject.

You may have realized that expo app on the time of creation (when we have written no code but just done the setup process), the size of the app touches nearly 40-50 MBs.

And there are a lot of other things also (and i don't know everything 🙂🙂). You can find a lot of details regarding this online.

Upvotes: 2

Related Questions