t1k:rn:performance:optimization

Field	Value
Module	`performance`
Version	`1.6.3`
Effort	`medium`
Tools	—

Keywords: bundle, FlashList, hermes, memo, optimization, performance, react native

How to invoke

/t1k:rn:performance:optimization

RN Performance Optimization

Hermes Engine

// app.json — Hermes is default in Expo SDK 48+
{
  "expo": {
    "jsEngine": "hermes"
  }
}

Hermes benefits: AOT bytecode compilation, lower memory, faster startup. Never disable without profiling evidence.

FlashList (Replace FlatList for large lists)

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  estimatedItemSize={72}          // Required — measure once, set accurately
  renderItem={({ item }) => <Row item={item} />}
  keyExtractor={(item) => item.id}
  drawDistance={200}              // px beyond viewport to pre-render
/>

Memo Strategy

// 1. memo() for expensive components
const Row = memo(({ item }: { item: Item }) => <View>...</View>);

// 2. useMemo for derived data
const sorted = useMemo(() => [...items].sort(compareFn), [items]);

// 3. useCallback for stable handlers
const onPress = useCallback((id: string) => handlePress(id), [handlePress]);

// 4. Custom comparator when needed
const Row = memo(Component, (prev, next) => prev.item.id === next.item.id);

Bundle Analysis

# Generate bundle stats
npx expo export --platform ios --dump-sourcemap
npx react-native-bundle-visualizer

# Check bundle size
npx expo export --platform android
ls -lh dist/

JS Thread vs UI Thread

Heavy computation → InteractionManager.runAfterInteractions()
CPU-intensive work → offload to react-native-workers or native module
Never block JS thread with synchronous loops during animations

Key Rules

estimatedItemSize in FlashList must be accurate — measure real items, not estimate
Avoid anonymous functions in renderItem — they create new references every render
Use React.lazy + Suspense for code splitting heavy screens
Profile with Flipper → Performance Monitor before optimizing — measure first

Gotchas

FlatList removeClippedSubviews can cause blank cells on Android — test before shipping
memo() has cost — only apply to components that actually re-render unnecessarily
Hermes does not support all ES2020+ features — check compatibility before using
FlashList requires estimatedItemSize — missing it causes warning and poor performance