React Native Performance Optimization: Principles, Bottlenecks, and Practical Practices

Background – With the rapid growth of mobile internet, pure native development can no longer meet increasing business demands. To improve development efficiency and user experience, the project adopted React Native, but observed performance issues on complex pages.

React Native Working Principle – React Native pages are written in JavaScript and run in a JavaScript VM on a background thread. The JS code is parsed into native iOS/Android Views. Communication between the JS thread and the main UI thread is asynchronous to keep the UI smooth.

1. Overview – The architecture separates JavaScript execution from UI rendering, preventing UI blockage by heavy JS logic.

2. Problem Identification and Optimization Ideas

2.1 Page Initialization – The bundle is loaded from local storage and executed, causing file‑load and execution overhead. Optimization: split the bundle to load only page‑specific code and consider using JS bytecode to speed up execution.

2.2 Data Loading – Data is assembled in JS, native makes network requests, and results are passed back via JSON serialization, which is costly. Optimization: minimize JS‑Native round‑trips and cache frequently used data.

2.3 Page Rendering – Rendering involves multiple thread switches (JS → Shadow → Main) and sequential component updates, leading to slow first‑paint and possible white‑screen. Optimization: reduce component count and nesting, simplify layout, and avoid unnecessary re‑renders.

2.4 Event Response – Each event triggers two JS‑Native communications (event handling and UI refresh). Heavy JS processing can cause lag. Optimization: offload intensive calculations and animation logic to native code, especially for long lists or animations.

React Native Performance Optimization Practices

1. Information Center – A module that synchronizes shared data between JS and native sides, classifying data as immutable, periodically updated, or real‑time, thereby reducing redundant JS‑Native communication.

2. Native‑Driven List – A list component where native manages cell lifecycle and scrolling, while JS provides data and templates. This reduces JS workload, eliminates extra thread switches, and improves memory usage and smoothness.

Conclusion – In React Native, any blockage in the JS or main thread leads to jank. The main optimization directions are to cut unnecessary component re‑renders, reduce JS‑Native communication, and shift heavy tasks to native. Implementing an information center and native‑driven components can yield significant performance gains.

References

1. https://www.freecodecamp.org/news/how-react-native-constructs-app-layouts-and-how-fabric-is-about-to-change-it-dd4cb510d055/ 2. https://tech.showmax.com/2018/05/react-native-or-not-react-native/ 3. https://reactnative.cn/docs/performance/ 4. https://www.simform.com/react-native-app-performance/