DMAIC (Define, Measure, Analyze, Improve, and Control) is a methodology for a structured approach to performance optimization efforts. It helps the project team to identify the key bottlenecks and their reasons and focus their efforts on improving performance in high-value areas.

Optimizing React code is crucial for well-made React Native apps. At the beginning of this training, we’ll explain the life cycles of React and the best ways to consume them to achieve performance boosts. After that, we’ll show some patterns and antipatterns used in daily React development, which significantly affect performance.

Writing JavaScript code is a major part of React Native development. As with any other language, sometimes it’s easy to introduce a shiny line of code that could kill performance. In this section, we’ll introduce tools to help participants diagnose their code and eliminate bottlenecks.

Understanding the communication between JS and Native is crucial for optimizing React Native performance. We want to make every participant aware of how it works, what it means to block a bridge, and how we count FPS. Differences between new and old RN architecture. Additionally, we will compare an initialized React Native app with native apps, including a demonstration of native tools that work well with React Native.

Apps written in React Native are fully native apps. It means that the tools used by native developers could be helpful for React Native developers. We would like to focus on things like UI Inspectors in Xcode and Android Studio, Xcode’s Instruments, and Android Profiler.

Sometimes debugging the dev build in Chrome or generally debugging JavaScript is not enough. We want all participants to be aware of the native debugging techniques, which include reading the logcat and xcode console, reading the device’s console, placing breakpoints in native code, and inspecting the UI.

In our experience, we found that RN performance is affected by a set of common performance issues. This module will present these issues, as well as ways to properly diagnose and resolve them.

A large set of performance issues occurring in RN apps is the result of excessive re-rendering of complex element trees. This process can be greatly optimized by properly restructuring your components and applying various memoization techniques. We will also showcase typical issues that happen when applying memoization and how to address them.

▪ How React Native can coexist with your current native codebase
▪ The legacy way vs. modern patterns of cross-platform adoption using packaging approach
▪  Platform-specific packaging and integration challenges—and how to solve them
▪  How to use the React Native Brownfield library to easily inject
▪  RN viewsNavigation patterns and UI handoffs between RN and native
▪  Managing data ownership and communication across layersHow to measure success and avoid common pitfalls

Whether you're modernizing an enterprise app or slowly migrating features to React Native, this workshop will give you practical tools, proven solutions we apply for Callstack clients, and real-world insight to do it right—without stopping the world or freezing your roadmap.

▪  Intro + What's Broken Today: silos, missing context, vendor overload.
▪  What Real User Monitoring (RUM) can and can’t show you
▪  JS Instrumentation with meaningful logs, spans, and metrics
▪  Native signals that are vital for your app (TTI, FPS, ANRs)
▪  OpenTelemetry 101 for React NativeLocal observability
▪  Connecting OTEL data to existing providers (Datadog, Sentry, or your preferred vendor)
▪  How to adopt unified observability step-by-step across dev, QA, and prod