From Lag to Lightning: Boosting React Native Performance

Hello, everyone. It's fantastic to be here today to talk about something that affects every developer at some point in their journey, that is performance. As we all know, mobile users expect seamless, fast experiences. Even a small lack can lead to frustration and abandonment.

My talk today, from lack to lightening, boosting the React Native app performance, will explore the optimization techniques to help you build apps that are not just functional, but delightfully fast. Whether you're troubleshooting bottlenecks or planning for optimizing, this will help you to equip with the practical strategies, tools, and examples that you can apply. Let's get started.

I'm Swetha. I'm working as a senior software engineer at Replik. I love trekking, I love bike riding, and I love animals, and I'm from India. Let's start by understanding why performance is a top priority for mobile apps. Studies show that 53% of users abandon an app if it takes longer than three seconds to load. 80% of users abandon the app that lag or crash. And the effects don't stop there. Every second of lag reduces conversion by 7%. And when app performs poorly, users churn, app ratings plummet, and businesses lose revenue. So, as a developer, our goal is to create apps that feel instantaneous and intuitive. To achieve that, we need to maintain a smooth 60 frames per second, or FPS. When we drop below 30 FPS, users start noticing, and that directly impacts the engagement and the retention. Today we'll focus on actionable ways to overcome these performance challenges.

But before we move over there, let's have an overview of the React Native architecture. The React Native promise of cross-platform development is built on its architecture, but this flexibility comes with a few challenges. In the legacy model, the React Native relies on a bridge to communicate between the JavaScript thread and the native thread asynchronously. This requires JSON serialization, which adds overhead and latency, especially for large data uploads. Here is a visual representation of what I just talked about, where this is a bridge which is used to communicate between the JavaScript thread and the native threads, and this all happens asynchronously, which requires JSON serialization.

Now, the new architecture. This features JSI, the JavaScript interface, fabric renderer, and turbo modules, which replaces the bridge. Now, JSI allows direct synchronous communication, unlocking significant performance improvements. These architectural shifts form the foundation for many of the techniques we'll discuss today. And here is a visual representation of what I was just talking about, the JSI, the fabric, the turbo modules, interacting, making the communication between the React and the native site.

Why do performance issues arise in React Native apps? Basically, why do the bottlenecks happen? Let's go through them. A key reason is the single-threaded nature of the JavaScript. The JS thread handles everything from business logic to rendering updates. As an example, if you see in the image, JS being a single thread, you give a task, it waits for it to execution, then another task picks up, then another task. Now, imagine sorting an array like this. This computation blocks the JS thread, delaying the UI update and causing animations to stutter. The solution? Delegate such task away from the main thread. Other culprits include inefficient flat list usage, overviews of prop state, causing frequent re-renders and blocking API calls. Another common bottleneck is a React Native bridge, which can get overwhelmed by large payloads. Now, take this example. Sending such a payload by the bridge is inefficient because of JSON's serialization and deserialization. A better solution is to either reduce the payload size, which doesn't look like a fair solution, or use JSI, which allows direct native communication, bypassing the bridge entirely. This improves data transfer efficiency and reduces latency.

Now, let's go with the performance monitoring and see a few of the profiling tools. Before we optimize, let's profile. A golden rule in performance tuning is measure, don't guess. Before diving into optimization, it's critical to identify where the bottlenecks lie. Guesswork can often lead to optimizing areas that don't significantly impact performance. This is why profiling should always be the first step. Without profiling, you might risk optimizing the wrong areas.

Now, since you have profiled and optimized the wrong areas, you have the data in order to fix and make sure the actual issue is fixed and it has a real impact. And there's a workflow, which like anyone can follow. Profile your app, analyze the data to find the bottlenecks, then optimize the right areas and then verify them again.

Now, React Native provides a variety of profiling tools. Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler. Let's go through them one by one and see how these tools can ensure and help us tackle performance issues.

Flipper. This is an all-in-one debugging and profiling platform that can be used to Flipper. This is an all-in-one debugging and profiling platform built for React Native. It connects to your app, offering a suite of plugins tailored for different debugging scenarios. We have React Dev Tools, which helps you inspect React components and understand the rendering behavior. The network plugin provides insights into API requests and responses, allowing you to debug network-related performance issues. Then we have the timeline plugin, which is particularly useful for profiling rendering performance, visualizing components, updates in the real time, and the memory plugin, which helps you monitor memory usage, helping and detect resolving leaks. This is how the Flipper UI looks like, where on the left, you can see the React Dev Tools is opened up, the plugin which we were just talking about. Then we have the React Dev Tools. This is a must-have for inspecting React component behavior. The React Dev Tools is invaluable for identifying unnecessary re-renders. It helps in inspecting the component hierarchy and props. Also, it highlights the components which are causing the re-renders. A common use case will be debugging the unnecessary re-renders. Here's an example. Suppose you have an app where the header component is re-rendered even though its props haven't changed. Now, with the use of React Dev Tools, you'll be able to identify the re-rendering and thus, you'll be able to optimize the wrapping, optimize the component by wrapping the header component in the React Dev Memo to prevent the further redundant re-renders.

This simple optimization can significantly improve rendering performance. Here's the React Dev Tool UI and how does it look like.

Then we have the Chrome Dev Tools. Now, its Flame Graph is a lightweight yet powerful profiler for JavaScript. It visualizes the function execution times and also highlights the bottlenecks.

Now, how to use? Basically, to use it, you have to open the Chrome Dev Tools and go to the performance tab, start recording and interact with the wrap and stop recording. Analyze the Flame Graph. This is how the Flame Graph is going to look like, which helps you identify the slow functions or the blocking code. Now, this approach helps pinpoint the issues like long-running loops or blocking API calls.

Now, then we have the Xcode Instruments, which is a native tool provided by Xcode, which helps you analyze the CPU, memory, and GPU usage for Rios application. It is invaluable for detecting the memory leaks and optimizing the rendering performance. It also helps in debugging the crashes and the memory leaks. Now, this is a UI for the instruments where you can choose any of the provided options to profile for, like CPU profiler or maybe logging or network calls, time profiler, or whatever you might feel like. And here is a sample run.

Then we have the Android Profiler, which provides a real-time view of CPU usage, network activity, and memory allocation. You can use its frame timeline to identify the rendering issues, often called as Jank. Now, here's a sample run being done for profiling the memory on the Android application.

Now, coming to optimizing the JavaScript performance. The JavaScript thread in React Native is your application's brain. To optimize the JavaScript thread, here are the few practices which can be followed. Make sure to offload the heavy computations to web workers or the JSI. Make sure to optimize the AP calls by batching the request or adding the debounce wherever applicable. For smooth performance, it should really ideally remain idle around 90% of the time so it can quickly handle UI updates and user interactions. Because heavy computations are a common offender. Take this example, where we compute a large data set synchronously. This freezes the JS thread. A better approach is to offload such tasks using web workers. Here it is. Now, with this setup, the computations happens off the main thread, keeping the UI responsive. Alternatively, for even tighter integration, use JSI to run native back functions directly.

When using tools like Chrome DevTools or React DevTools, keep an eye on long running JavaScript functions. Profiling reveals the areas where optimizations like debouncing or batching events can make a tangible difference. Profiling is a game changer for debugging thread blocking issues.

Another crucial optimization is enabling the Hermes engine, a JavaScript engine specifically designed for React Native. Hermes improves performance by pre-compiling JavaScript into bytecode, reducing parsing time at runtime. It also optimizes garbage collection to better suit React Native's memory patterns. Enabling Hermes on Android can cut cold start times by 30% or more.

To enhance rendering performance, the flatlist component is commonly used for rendering large lists. However, improper usage can impact performance. Strategies to optimize flatlist include using props such as initial numToRender and maxToRenderPerBatch to control the number of rendered items, memoizing the render item to avoid unnecessary re-renders, and delaying non-urgent tasks until animations or gestures are complete using the interaction manager API.

Here are a few of the strategies which you can use to optimize the flatlist. First, use the initial numToRender, maxToRenderPerBatch, etc. props when using the flatlist to control how many times or how many items are rendered initially and in each batch. Always memoize the render item to avoid unnecessary re-renders. Here's a practical example where I've used the initial numToRender prop and the maxToRenderPerBatch prop in order to make sure that only the items in the viewport are rendered, which will dramatically reduce the rendering overhead.

Then, for smooth interactions, this often requires you to delay the non-urgent task until the animations or gestures are complete. For this, React Native provides the interaction manager API. Using this, you can defer the non-urgent task until after the animation completes. So, here's an example of how it works. In this case, the data fetch is deferred until the user interaction settles, ensuring a stutter-free experience. This technique is especially useful when you have background tasks competing with animations.

Coming to memory management, memory leaks are silent performance killers. Now, these occur when you added a listener in the use effect, but you didn't remove it, and that listener is still retained in that use effect. Or when resources like timers, subscriptions, or listeners are not cleaned up after a component unmounts. So, as a rule of thumb, always clean up side effects. For example, this code creates a memory leak, but this version fixes up by adding that cleanup logic. So, always clean up the side effects in your use effect hook to prevent components from holding on to memory unnecessarily.

Now, animations are critical in delivering a polished user experience in React Native. However, they often introduce performance bottlenecks if not implemented effectively. Let's look at how to achieve buttery smooth animations. Now, when it comes to animations, one common mistake is relying on the JSThread to execute them. This causes lag whenever the JSThread is busy. To avoid this, always use the native driver. This moves animation to the native thread. By avoiding JSThread interference, you ensure smoother animations even during heavy loads. Here's an example. By setting the useNativeDriver as true, the animation is offloaded to the native thread, ensuring it runs smoothly regardless of the JSThread activity. Now, profiling with tools like Flipper's timeline or Android Profiler can reveal the janky animations. These often occur because animations rely on the JSThread. Using the native driver offloads this workload to the UI thread, ensuring smooth 60FPS performance even during the heavy JS processing.

Then, we have the preloading and the caching. Now, preloading images or animations ensures that they are ready when needed. InteractionManager lets you defer background rendering tasks until the UI becomes idle. Then, we can use libraries like React Native FastImage to preload the images and cache them for subsequent usage. Then, using the React Native GestureHandler, this allows you to delegate the gesture processing to the native thread. This avoids gesture lag, especially for complex interactions.

Then, offloading heavy computations ensures the UI remains fluid. Background threads or the turbo modules are ideal for this. Now, coming to the takeaways. In closing, remember that performance optimization is an iterative process. So, always start by profiling your app to identify the real bottlenecks. Leverage modern tools like Hermes and the new React Native architecture for significant gains. Continuously test your app under real-world conditions to ensure your optimization holds up.

Now, here are a few of the resources which I have used and which have helped me in order to optimize my application's performance. And in the end, I would like to say that performance is not a feature, it's a user expectation. Let's make our apps fast and delightful as the user demands. Thank you.