@lithinn

Performance in React (Native)

Anna Doubkova @ Hive

@lithinn

Performance

@lithinn

Patterns vs pre-optimisation

@lithinn

IssuesThe actual ones

Slow startup time

Time to first interaction

Animation jagged/slow

Slow response to user action

@lithinn

The weak link?

UI Thread JS ThreadRN Bridge

@lithinn

Looking for the culprit

@lithinn

Measuring JS performance

@lithinn

@lithinn

@lithinn

Measuring JS performance

@lithinn

State change

@lithinn

Change

Render functions

New virtual dom tree

Reconciliation

Rendering

@lithinn

Should component update

the unexpected villain

@lithinn

@lithinn

@lithinn

@lithinn

Reconciler- Change node type -> re-mount- Change node prop/state -> re-render self & children

- Shallow equal

- Change propagates to all children

@lithinn

Node type change

@lithinn

Prop change

@lithinn

Recursive updates

@lithinn

Components

@lithinn

Examples - anonymous functions

@lithinn

Examples - anonymous functions

@lithinn

Examples - react-redux

@lithinn

Examples - react-redux

@lithinn

Examples - selectors

@lithinn

Examples - selectors

@lithinn

State - best practices

@lithinn

Local state - setting state based on props

@lithinn

Local state - setting state based on props

@lithinn

Local state - necessary?

@lithinn

Redux state - local

@lithinn

Redux state - batching

@lithinn

Connecting state

@lithinn

Connecting state

@lithinn

General conclusions

For react web/RN

- It’s always the JS- Measure before acting- Think about reconciliation &

state updates- Memoise

@lithinn

...or just use MobX

@lithinn

Native only

@lithinn

Native only - animations

@lithinn

Native only - inline requires

RAM bundler & Lazy Package

@lithinn

Native only - low-level measuring- Use profilers & systrace to check how your app is doing on low level

@lithinn

Native only - routing- React router native- React navigation- React native navigation

@lithinn

Optimise wisely

@lithinn

Thank you!

Anna Doubkova @ Hive