Performance Limitations of React Native and How to Overcome Them (Note)

Note

Key takeaway

1. JavaScript is fast
2. Native is also fast
3. The bridge is slow (serialization & deserialization)

Principle

Keep passes over the bridge to a minimum!

Case study

onScroll of a ScrollView that got called for every frame, which contradicts to the above principle.

Solution 1

1. Move the component to native

2. Implement onScroll to native by listen to the scroll events

Hint 1: changing opacity of a native view will influence its children

Hint 2: react tag/node handle

Hint 3: keep 10% of engineers native

Solution 2

Use Animated.ScrollView and native event

Sample code

Post in Medium

Updated post in Medium

ScrollView, native event, onScroll, performance, react, react native, wix

This information is presented at Jun 3, 2017, check it out from Youtube