in react (native) performance · examples - react-redux. @lithinn examples - react-redux. @lithinn...
TRANSCRIPT
@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