Performance Basics

npx create-expo-app@latest MyPerfApp --template blank-typescript
cd MyPerfApp
npx expo start

// src/perf/tti.ts - team-defined contract
export type TtiMilestone =
  | "app_launch" // process start / JS entry
  | "root_layout_mounted"
  | "primary_tab_layout"
  | "primary_data_ready"
  | "primary_interactive";
 
/**
 * Consumer feed app: cold start → home feed scrollable + pull-to-refresh works.
 * B2B form app: cold start → first input focused and keyboard-ready.
 * Document YOUR primary tab and gate in docs/performance-budgets.md.
 */
export const TTI_CONTRACT = {
  start: "app_launch" as const,
  end: "primary_interactive" as const,
  referenceDevice: "Pixel 6a class Android",
  budgetMs: 2500,
};

// app/_layout.tsx
import { useEffect, useRef } from "react";
import { Slot } from "expo-router";
 
const t0 = globalThis.performance?.now?.() ?? Date.now();
 
export default function RootLayout() {
  const reported = useRef(false);
 
  useEffect(() => {
    if (reported.current) return;
    reported.current = true;
    const rootMounted = globalThis.performance?.now?.() ?? Date.now();
    console.info("[perf] root_layout_mounted_ms", Math.round(rootMounted - t0));
  }, []);
 
  return <Slot />;
}

// app/(tabs)/index.tsx - primary tab marks interactive
import { useEffect, useRef } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export default function HomeScreen() {
  const interactive = useRef(false);
 
  useEffect(() => {
    if (interactive.current) return;
    interactive.current = true;
    // In production: analytics.track("tti_primary_interactive", { ms: ... })
    console.info("[perf] primary_interactive");
  }, []);
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Home</Text>
      <Pressable style={styles.cta}>
        <Text style={styles.ctaText}>Primary action</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, justifyContent: "center" },
  title: { fontSize: 24, fontWeight: "700", marginBottom: 16 },
  cta: { backgroundColor: "#2563eb", padding: 14, borderRadius: 10, alignItems: "center" },
  ctaText: { color: "#fff", fontWeight: "600" },
});

// Dev only - shake device → "Show Perf Monitor" in dev menu
// Watch both counters while scrolling a heavy FlatList
import { FlatList, StyleSheet, Text, View } from "react-native";
 
const ROWS = Array.from({ length: 500 }, (_, i) => ({ id: String(i), title: `Row ${i}` }));
 
export default function FpsDemo() {
  return (
    <FlatList
      data={ROWS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  row: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#e2e8f0" },
});

// scripts/perf/frame-budget.ts - documentation constant for the team
export const FRAME_BUDGET = {
  targetFps: 60,
  frameBudgetMs: 1000 / 60, // ~16.7
  auditFloorFps: 55,
  primaryScenarios: [
    "home_feed_fast_fling",
    "tab_switch_animation",
    "modal_open_close",
    "pull_to_refresh",
  ],
} as const;

// src/perf/memory-budget.ts
export const MEMORY_BUDGET = {
  tier: "standard" as const,
  ceilingMb: 350,
  soakMinutes: 10,
  scenarios: ["scroll_home", "open_profile", "background_2min", "return_and_scroll"],
};

# Export production bundle for size check (adjust entry for your app)
npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file node_modules/expo-router/entry.js \
  --bundle-output /tmp/index.android.bundle \
  --assets-dest /tmp/assets
 
ls -lh /tmp/index.android.bundle

import { Pressable, StyleSheet, Text } from "react-native";
 
export function SlowButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable
      style={styles.btn}
      onPress={() => {
        // Runs on JS thread - blocks other JS work until finished
        let sum = 0;
        for (let i = 0; i < 2_000_000; i++) sum += i;
        onPress();
      }}
    >
      <Text style={styles.label}>Tap me</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  btn: { padding: 14, backgroundColor: "#2563eb", borderRadius: 8 },
  label: { color: "#fff", fontWeight: "600" },
});

import { useEffect, useState } from "react";
import { InteractionManager, StyleSheet, Text, View } from "react-native";
 
export default function HomeWithDeferredInit() {
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      // Analytics init, feature flags, non-critical prefetch
      setReady(true);
    });
    return () => task.cancel();
  }, []);
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Home</Text>
      <Text style={styles.meta}>{ready ? "Telemetry on" : "Core UI only"}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16 },
  title: { fontSize: 22, fontWeight: "700" },
  meta: { marginTop: 8, color: "#64748b" },
});

## Weekly scroll audit (5 minutes)
 
1. Cold start app on Pixel 6a (or team reference device).
2. Open primary feed tab.
3. Fast fling scroll for 15 seconds.
4. Record: UI FPS min, JS FPS min, any blank rows.
5. Open/close modal on feed - note parent re-render spikes in DevTools.
6. Compare to last RC - regressions > 10% trigger investigation.

// src/perf/budgets.ts - import constants in CI scripts and docs
export const PERF_BUDGETS = {
  bundleGzipMb: 4,
  ttiMs: 2500,
  scrollFpsFloor: 55,
  memoryCeilingMb: 350,
} as const;