Skip to main content

React Native Performance Audit – Consultant Playbook

Engagement Outline​

Week 0 – Intake​

  • Gather app objectives, target devices, known issues, and SLAs.
  • Access to builds, source (read-only), and profiling tools.
  • Define success metrics (launch time, FPS on key screens, memory footprint).

Week 1 – Baseline & Findings​

  • Run Flipper, React Profiler, native profilers on 2–3 representative devices.
  • Produce a findings doc: top 5 hotspots, repro steps, traces, screenshots.

Week 2 – Recommendations & Plan​

  • Prioritized backlog with effort/impact and owners.
  • Architecture notes: state normalization, memoization strategy, image pipeline.

Week 3+ – Implementation Support​

  • Pair-program on complex fixes; guardrails and code examples.
  • Set up perf monitoring in CI and runtime metrics collection.

Audit Checklist​

  • Startup: evaluate bundle size, eager work, dynamic import opportunities.
  • Navigation: check transition stutters; prefetch data and cache.
  • Lists: virtualization settings, memoization, stable keys, item layout.
  • State: verify selector memoization, avoid global re-render storms.
  • Network: pagination, compression, caching, prioritize critical paths.
  • Images: caching, resizing, placeholders; avoid layout shifts.
  • Native bridges: batch calls, avoid chatty bridges.

Deliverables Template​

  1. Findings Report (PDF/MD)
  2. Optimization Plan (Backlog)
  3. Code Diffs (PR links)
  4. Benchmark Results (before/after)
  5. Runbook (how to keep performance healthy)

Sample Acceptance Criteria​

  • Launch time reduced by ≥30% on target device.
  • List scroll maintains ≥55fps in critical screens.
  • No JS long tasks >50ms in top interactions.

Quick Wins Library​

  • Memoize heavy props and callbacks in hot components.
  • Convert large sync JSON ops to incremental parsing or web workers alternative.
  • Enable image caching and sizing; replace slow components.
  • Defer non-critical work using InteractionManager.runAfterInteractions.
import { InteractionManager } from 'react-native';

useEffect(() => {
  const task = InteractionManager.runAfterInteractions(() => {
    // non-critical work here
  });
  return () => task.cancel();
}, []);

Reporting & Handover​

  • Store traces/screenshots in a shared folder for future audits.
  • Add CI perf smoke checks; document budgets and thresholds.