Memoization Tag

How to improve the performance of your React Native App

React-Native(RN) apps suffer huge performance issues as compared to native apps. During initial development days, such challenges are ignored but as soon as the app grows developers find it difficult to improve. Sometimes, extreme calls to dump the RN app happen. We can escape such steps and you can easily improve the RN app performance, just with little effort.

There are multiple ways to improve RN app performance:

Basics of RN performance:

Hermes: A JS engine to optimizes app start time, reduce APK size, and memory footprints. Follow this guide to setup for your app.

Remove Arrow functions: Every render creates new instances of these functions. When passed to children, it will re-render the child components even when nothing has changed in them.

Simple Reducers: Reducers are just to dispatch store changes, not for complex code logic, avoid that as much as possible.

Use native driver: Enable useNativeDriver=true for all the animations that you use in the app.

Memoization:

React.PureComponent: This works for class components. It does a shallow comparison for the previous and new props, re-renders if they are not equal.

React.memo: Only functional components can leverage this functionality, and works similar to React.PureComponent. React.memo comes with an option to use a custom comparison function, to provide more control over it. For the child functional components use React.memo export const ChildrenMemoComponent = React.memo(ChildFunctionComponent) to memoize.

Whenever parent component props change children’s components are also re-rendered causing huge performance issues. This can be avoided either by using shouldComponentUpdate(), React.PureComponent, React.Memo. Memoization breaks if React creates new functions instances when child component is passed with callback functions from parents. New function instances are created with inline function calls, arrow functions, functions calls inside render. For function component use useCallback hook and for class component define functions outside render and pass references to children.

Memory leaks:

Debugger warnings and errors: You need to get rid of them, just enable debugging, remove (console.disableYellowBox = true) and fix all the warnings, promise rejections, key errors and other errors too.

Android Studio Profiler: Great tool to find memory leaks in the app. In the below image, the bottom section has lots of bin icons(white color icons) that when android running its garbage collector and repeated icons indicate memory leaks. Perform actions in your app, debug them and fix asap.

Android Studio Profiler
Pic courtesy: medium.com

React-DevTools: React Profiler provides in-depth component-level leak detection, though it supports RN version ≥ 0.57. Profiler API helps in optimizations like memoization, cost of rendering, sluggish code, re-renders. Go through the docs to check how to integrate it with your app.

Inspecting using React-DevTools
Pic courtesy: medium.com

Inspecting RN bridge: RN Bridge works asynchronously and converts javascript queries as JSON, finally calling the natives modules. We are leaving for you to check out how to do this, there are numerous great articles on this, We will write more on this later.

Stay updated:

Keep your libraries, React version updated to the latest stable versions:

React-native upgrade helper: RN community provides awesome documentation for upgrading RN versions. Major updates are between v0.60.0 and v0.63.0, there will be more errors you will need to fix. Do check out what’s new with v0.64 here.

Upgrade libraries & dependencies: A time-consuming process, during RN update also keep React in mind and upgrade accordingly, v17.0.0 has major changes. For every dependency you upgrade follow the below process:

• Package.json: Segment out the major and minor version upgrades using npm website, “^”(^2.1.2 will use releases from 2.1.2 to <3.0.0) and “~”(~2.1.2 will use releases from 2.1.2 to <2.2.0). For minor version just replacing the version name will do the work. For Major version upgrades check out the version release documentation for breaking changes.
• Code changes: After upgrading the version inside package.json make suitable code changes using Github document and release notes.
• Remove junk: This is also the right time to clean your app code. Try to remove unused codes, folders, files, and dependencies from package.json. Also, to reduce your assets, there is a great tool that does lossless compression, ImageOptim.

That’s 90% of your whole performance improvement job. There are other ways like amalgamation of native code and RN code but we will leave that for some other time.

For more information and to develop mobile application using React Native, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a custom mobile application using React Native, please visit our technology page.

Content Source:

1. medium.com