Part 9 · Further improvements

Measure before moving work native

Prerequisites: 06-thread-ownership, 07-events-and-lifecycle

Measure before moving work native — mechanism

A measurement loop, not a claim that native code is inherently faster for a particular workload. Nodes: Symptom, Trace, Hypothesis, Change, Re-measure.
A measurement loop, not a claim that native code is inherently faster for a particular workload. [S01] [S10] [S12]

Mental model verified

A slow screen may be caused by JS computation, too many renders, layout, UI-thread work, image decoding or native callback volume. JSI reduces one class of overhead but is not a universal performance fix. Hermes behavior and profiling should be judged in release builds.

[S01] [S10] [S12]

Worked example synthesis

If a camera overlay stutters, record JS and UI frame behavior, event frequency and payload size. Try lower event cadence or native aggregation first; compare the same device and scenario after each change.

[S07] [S12]

Engineering choice synthesis

Set a target interaction and trace a real flow. Change one bottleneck at a time; record median and tail latency, dropped frames and memory on representative Android and iOS devices. These are proposed measurements, not claimed results.

[S01] [S12]

Pitfall and next step synthesis

A microbenchmark for module calls can miss image conversion, native SDK work and React rerender cost. Validate the user-visible result and watch for regressions in startup, battery or memory.

[S01] [S10] [S12]
Keep this: Measure JS frames, UI frames, payload size and native work before deciding which boundary to change.
Check yourself: What evidence would support moving a per-frame calculation to native?

A release-build trace showing repeated boundary or JS work hurting the target frame budget, plus an improved end-to-end measurement after a prototype.

Sources & further reading

  1. [S01] About the New Architecture

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JSI replaces the serialized bridge; enabling it alone does not promise speed.

    Read the diagrams and API boundaries for jsi replaces the serialized bridge; enabling it alone does not promise speed.

  2. [S07] Expo Modules API: Reference

    Expo · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JSI abstraction; Function, AsyncFunction, queues, views, events and lifecycle.

    Read the diagrams and API boundaries for jsi abstraction; function, asyncfunction, queues, views, events and lifecycle.

  3. [S10] Using Hermes

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: Bundled Hermes is the default JS engine and release builds matter for measurement.

    Read the diagrams and API boundaries for bundled hermes is the default js engine and release builds matter for measurement.

  4. [S12] Performance Overview

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JS and UI frame rates and practical performance diagnosis.

    Read the diagrams and API boundaries for js and ui frame rates and practical performance diagnosis.