Performance Does Matter

General principles

Every 1% decrease in startup time correlates with 0.27% increase in visitation.

More than 35% of users use > 2 years old device.

Infrastructure

Hermes

Intl support- alternative polyfills

Proxy - use hermes-engine

Remove other es6 features

JSI

Reduce bundle size

Use react-native-bundle-visualizer

and remove unused bundles

Ram bundle - on demand loading of individual app modules

Faster startup time

iOS

export BUNDLE_COMMAND="ram-bundle"

Android

project.ext.react = [ bundleCommand: "ram-bundle", ]

Inline require

require can be used in runtime now!

Code optimization

Optimize your render()

shouldComponentUpdate() - n.b., it has drawbacks in software engeering however

Identify wasted renders

Use PureComponent

Make data immutable

Avoid passing new reference of the same old data

Network

Use local content first before going to internet.

Use loading indicator (skeleton or spinning animation)

Animation

Use native driver to avoid the bridge

Prefer native implementation than JS

Tools

Flipper

Device logs

Crash reporter inspecting

Network inspecting

App local database

Inspecting device preferences

Inspecting cached images

flipper-plugin-react-native-performance

React-DevTools

render() shaming

react-native-perf-logger

Detox instruments

why-did-you-render

callstack, performance, react native

This information is presented at Oct 20, 2020, check it out from React Native EU Youtube Channel