React Native Performance

From Rendering to Animations
React Native Performance

Holy grail of mobile development

Holy grail of mobile development
Learn Once, Write Anywhere

Fear and Loathing in React-Native

Morale => Rethinking React-Native
• Mobile users have high standards in terms of app responsiveness and
animations
• Not thinking about performance is almost certainly would result in
slow app
• Rarely users write about performance directly
• Lots of performance cases can be solved on the React-Native level

Who am I
• Bob Ilya Ivanov
• React-Native 3 years
• React.js 5 years
• Software Development 8 years

Why this talk
Performance
Correctness
Developer
Experience
is hard

Agenda
• Rendering
• Dealing with slow code
• Animations

What we are
going to build
• Why should we care
• Where should we focus
• How to achive fewer renders
Rendering

Why
Press – 1.72s
Changes – 2.24s
Response – 520ms
QuickTime Player on MacOS
Shortcut ⌘ + T

Why
Press – 2.34s
Changes – 4.18s
Response – 1840ms

Why
• 100 Artists – 520ms
• 300 Artists – 1840ms
• Golden rule – 200ms

Why – summary
• Performance is already slow for small sample 100 artists (500ms)
• Performance degrades with more data
• Slow responsiveness stack because of JS single threaded

Where
• 1 to * relationships in our hierarchy
• <FlatList or {items.map(item => …} where the count is unknown or varied
• No control over the number of items in our hierarchy
• No control the density of state updates

Where
Page
Artist 1
StatusBar
Box 1 Box 2... Box N
Artist 2 …
StatusBar2
Artist N
StatusBarN

Update Complexity (big O for onPress)
• Current – O(n * m)
• n – number of artists
• m – number of boxes
• Goal – O(1)
Page
Artist 1
StatusBar
Box 1 Box 2... Box M
Artist 2 …
StatusBar2
Artist N
StatusBarN

Where – summary
• Look for FlatList or .map in your codebase
• Look for content of variable length

How
• PureComponent
• React.memo
• shouldComponentUpdate

sholdComponentUpdate
render?
propsstate
shouldComponentUpdate(nextProps, nextState, nextContext) {
return this.props.id !== nextProps.id;
}
conte
xt

PureComponent
Used for classes. Shallow compare === for all properties of props, state
and context
React.memo
Used for function. Shallow compare === for all properties of props and
context

ArtistInfo component
renderArtist(artist) {
const artistStyle = [
styles.artistContainer,
artist.isSelected && styles.selectedArtist
];
return (
<ArtistInfo
style={artistStyle}
onPress={() => this.onPress(artist.id)}
fontStyle={{ fontSize: 23 }}
popularity={artist.popularity} //0..1
/>
);
}

What does it mean to break PureComponent
class MyPureComponent
extends PureComponent {
}
const MyPureComponent =
React.memo(/.../);OR
<MyPureComponent
myParameter={{property: this.state.myValue}}
/>
const a = {} === {}; //false
const b = {property: 1} === {property: 1}; //false
const c = [] === []; //false
const d = (() => undefined) === (() => undefined); //false
const e = '1' === '1'; //true
const f = 1 === 1; //true
This completely ignores shallow compare done by PureComponent because
this.props.myParameter === nextProps.myParameter
will always be false

Fixing onPress
onPress(id) {
this.setState(...)
}
return (
<ArtistInfo
onPress={() => this.onPress(artist.id)}
/>
);
}
class ArtistInfo extends PureComponent {
render() {
//...
<TouchableOpacity onPress={this.props.onPress}

Fixing onPress
onPress(id) {
this.setState(...)
}
return (
<ArtistInfo
id={artist.id}
onPress={this.onPress}
/>
);
}
render() {
//...
<TouchableOpacity
onPress={() => this.props.onPress(this.props.id)}

Fixing onPress
onPress(id) {
this.setState(...)
// ERROR: setState is not a function
}
return (
<ArtistInfo
id={artist.id}
/>
);
}
render() {
//...
<TouchableOpacity
onPress={() => this.props.onPress(this.props.id)}

Fixing onPress
onPress = (id) => {
// works fine...
// Breaks Hot Reloading
}
return (
<ArtistInfo
id={artist.id}
/>
);
}
Performance
Correctness
Developer
Experience
https://github.com/facebook/react-native/issues/10991

Solutions
• Bind all methods in constructor (not really an option)
• auto-bind
• babel-plugin-functional-hmr
constructor(props){
super(props);
this.onPress = this.onPress.bind(this);
//...
}
import autoBind from 'auto-bind’;
constructor(props){
super(props);
autoBind(this);
}

Fixing styles
];
return (
<ArtistInfo
style={artistStyle}
fontStyle={{ fontSize: 23 }}
/>
);
}
const styles = StyleSheet.create({
artistContainer: {
//commonStyles
},
selectedArtist: {
//specific styles
}
});

Fixing styles const styles = StyleSheet.create({
artistContainer: {
//commonStyles
},
selectedArtist: {
//specific styles
},
artistFont:{
fontSize: 23
}
});
];
return (
<ArtistInfo
style={artistStyle}
fontStyle={styles.artistFont}
/>
);
}

Fixing styles const styles = StyleSheet.create({
artistContainer: {
//commonStyles
},
selectedArtist: {
//specific styles
},
artistFont:{
fontSize: 23
}
});
selectedArtistStyle = [
styles.selectedArtist,
];
const artistStyle = artist.isSelected
? this.selectedArtistStyle
: styles.artistContainer;
return (
<ArtistInfo
style={artistStyle}
fontStyle={styles.artistFont}
/>
);
}

Common render troublemakers
• {}
• []
• () => this.handle(someData)

Results
Careless O(n * m)
100 Artists – 520ms
Optimized O(1)

Fixing popularity
return (
<ArtistInfo
popularity={artist.popularity} //0..1
/>
);
}

• Popularity is based on the most popular artist in the current list
• Artist A 3 000 000 – 1
• Artist B 20 000 – 0.00666666667
• Artist C 1 020 0 00 – 0.34
• Artist D 3 000 001 – 1
popularity = artist.listeners / maxListeners;
3 000 00020 000
0, 0.00000001, 0.00000002, … 1

• Artist A 3 000 000 – 1 needs update to 0.999999667
• Artist B 20 000 – 0.00666666667 needs update to 0.00666666444
• Artist C. 1 020 0 00 – 0.34 needs update to 0.339999887
• Artist D 3 000 001 – 1
popularity = artist.listeners / maxListeners;
3 000 00020 000
0, 0.00000001, 0.00000002, … 1

• Artist A 3 000 000 – 100
• Artist B 20 000 – 0
• Artist C 1 020 0 00 – 34
• Artist D 3 000 001 – 100
popularity = Math.round(artist.listeners / maxListeners * 100);
20 000 3 000 000
0, 1, 2, 3, … 100

• Artist A 3 000 000 – 100 – no need to update
• Artist B 20 000 – 0 – no need to update
• Artist C 1 020 0 00 – 34 – no need to update
• Artist D 3 000 001 – 100
popularity = Math.round(artist.listeners / maxListeners * 100);
20 000 3 000 000
0, 1, 2, 3, … 100

Tools
• ESLint rules
• why-did-you-update
• why-did-you-render
• React profiles
• console.log
• Sandboxed pages (aka Storybook without Storybook)

Rendering summary
• Measure on real devices
• Indentify places where performance degrages
• Make sure you are using pessimistic scenarious (lots of data on slow
device)
• Indetify where you are calling redundant renders within FlatLists or
.map. You can use console.log, why-did-you-update, profilers, etc..
• Refactor the API and usage of your components to make sure no new
instances are being created during FlatList renders

Slow Code
• Internal long-running code (do not assume, measure)
• External long-running code
_.sortBy(artists, [a => a.getListeners()]);
for (let i = 0; i < 10000000; i++) {
//...
import {preinitializedOperation} from 'heavy-library';

I need a [min,max] from a set of random numbers
longRunningOperation() {
for (let i = 0; i < 10000000; i++) {
//...
this.setState({
minValue,
maxValue,
isRunning: false
});
render() {
return (
this.state.isRunning ?
<LoadingIndicator />

onPressWithSetStateCallback = () =>
this.setState(
{isRunning: true},
() => this.longRunningOperation(),
);

onPressWithAfterInteractions = () =>
this.setState(
{isRunning: true},
() =>
InteractionManager
.runAfterInteractions(this.longRunningOperation)
);

onPressSetTimeout = () =>
this.setState(
{isRunning: true},
() => setTimeout(this.longRunningOperation),
);

A few words about setTimeout
Performance
Correctness
Developer
Experience
this.setState(
{isRunning: true},
() => setTimeout(this.longRunningOperation, 250),
);

A few words about setTimeout
this.setState(
{isRunning: true},
() => setTimeout(this.longRunningOperation, 666),
);

External long-running code - inline require
import {preinitializedOperation}
from 'heavy-library’;
onPress(){
preinitializedOperation();
}
onPress(){
const {preinitializedOperation} =
require('heavy-library’);
preinitializedOperation();
}

Animations (non-native imperative)
offset = new Animated.Value(0);
onScroll(event) {
const y = event.nativeEvent.contentOffset.y;
if (this.prevOffset === undefined) {
this.prevOffset = y;
} else {
const diff = this.prevOffset - y;
const newOffset = this.offset._value + diff;
this.offset.setValue(Math.min(0, Math.max(newOffset, -HEADER_HEIGHT)));
this.prevOffset = event.nativeEvent.contentOffset.y;
}
}
<FlatList
scrollEventThrottle={16}
onScroll={this.onScroll}
<Header
style={{marginTop: this.offset}}
/>
// 1000 / 60

Animations (non-native imperative)
offset = new Animated.Value(0);
onScroll(event) {
const y = event.nativeEvent.contentOffset.y;
if (this.prevOffset === undefined) {
this.prevOffset = y;
} else {
const diff = this.prevOffset - y;
const newOffset = this.offset._value + diff;
this.offset.setValue(Math.min(0, Math.max(newOffset, -HEADER_HEIGHT)));
this.prevOffset = event.nativeEvent.contentOffset.y;
}
}
<FlatList
onScroll={this.onScroll}
<Header
style={{marginTop: this.offset}}
/>

Animations (native declarative)
clampedOffset = Animated.diffClamp(this.offset, 0, HEADER_HEIGHT).interpolate(
{
inputRange: [0, 1],
outputRange: [0, -1],
},
);
headerStyle = {transform: [{translateY: this.clampedOffset}]};
<Animated.FlatList
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.offset}}}],
{useNativeDriver: true},
)}

Summary
• Don’t blame React-Native for it’s performance, at least by default
• A number of performance problems can be solved on the JS level
• Focus on measurement, then optimize having clear numbers in mind
• Focus on 1to* parts within your app
• So much better to have more renders, than fewer ©

Thanks
Email: static.ila@gmail.com
Slides:
Repo: https://github.com/ilyaivanov/ReactNativePerformance
Expo: https://expo.io/@innerself/ReactNativePerformance

React Native Performance

Recommended

Recommended

More Related Content

Similar to React Native Performance

Similar to React Native Performance (20)

React Native Performance