Performance Basics
Understanding the fundamentals of React Native performance is essential before diving into specific optimization techniques. This tutorial covers the core concepts that affect how smoothly your app runs.
The Three Threads
React Native traditionally operates using three threads: the JavaScript thread running your application logic, the native UI thread rendering components, and the shadow thread calculating layout.
What Causes Performance Issues?
- Excessive or unnecessary component re-renders
- Large, unoptimized images loaded into memory
- Heavy computations blocking the JavaScript thread
- Rendering large lists without virtualization
- Excessive communication across the bridge
Measuring Frame Rate
React Native aims for 60 frames per second for smooth animations and scrolling. Dropped frames, often called "jank," occur when the JavaScript or UI thread cannot keep up with this target.
JavaScript Thread Blocking
Since JavaScript runs on a single thread, long-running synchronous operations, such as heavy loops or large JSON parsing, can block rendering and cause the UI to freeze temporarily.
The Impact of the New Architecture
React Native’s new architecture, built on JSI, Fabric, and TurboModules, significantly reduces many traditional performance bottlenecks by eliminating the JSON serialization overhead of the legacy bridge.
A Performance Mindset
Building performant apps starts with awareness during development, such as avoiding unnecessary re-renders and testing on real, lower-end devices rather than only high-end simulators.
Conclusion
Understanding these performance fundamentals, including the threading model and common causes of jank, provides the foundation for applying the specific optimization techniques covered in the rest of this section.
