Skip to main content

Performance

React Native performance work is about discipline, not folklore. Teams get better results when they measure startup time, frame stability, list behavior, and network-driven rendering instead of guessing.

Performance priorities​

Focus on these first:

  • Cold start and first usable screen.
  • Large list rendering.
  • Image loading and memory pressure.
  • Avoidable re-renders.
  • Work executed during navigation transitions.

Startup performance​

Improve startup by:

  • Keeping bootstrap work minimal.
  • Deferring non-essential network calls.
  • Loading only the configuration required for the first interaction.
  • Avoiding large synchronous initialization chains before the first screen paints.

Rendering discipline​

React Native rendering cost often grows because screens own too much responsibility. Reduce pressure by:

  • Splitting large screens into stable subcomponents.
  • Avoiding unnecessary state at the top of the tree.
  • Memoizing only where measurement justifies it.
  • Keeping style, data, and event handlers stable when repeated lists depend on them.

List performance​

Lists are the most common source of degraded interaction quality.

Standardize:

  • Virtualized list primitives.
  • Stable item keys.
  • Fixed or predictable item heights where possible.
  • Lightweight cell components.
  • Pagination and incremental loading behavior.

Images and media​

Images affect startup time, memory, bandwidth, and scroll smoothness. Document:

  • Asset sizes and allowed formats.
  • Caching strategy.
  • Placeholder behavior.
  • When full-resolution media can load.

Profiling workflow​

Adopt a repeatable profiling loop:

  1. Reproduce the slow path on a representative device.
  2. Measure the issue with platform and JavaScript tooling.
  3. Isolate whether the cost is render, network, image, or native work.
  4. Fix one class of issue at a time.
  5. Re-measure after the change.

Performance anti-patterns​

  • Fetching too much on screen focus.
  • Mounting expensive providers above every route.
  • Rendering huge lists with complex inline logic.
  • Doing work for invisible UI states.
  • Treating every animation as equally important.

Operationalize performance​

Performance improves when it becomes part of the delivery system:

  • Track startup and screen-level metrics.
  • Add regression budgets for major flows.
  • Review performance before release, not only after complaints.
  • Run periodic audits on lower-end devices.

Team rule​

If a screen feels slow, document the measured cause before debating the fix. Performance arguments should be evidence-based.

Next, formalize testing and debugging.