Performance

Performance

TTI Targets (Time to Interactive)

JS Bundle load target: <500ms. Native init target: <500ms.

FPS Targets

UI FPS drop = native rendering issue (layout properties animated, heavy views)
JS FPS drop = JS thread blocked (heavy computation, too many re-renders)

Lists -- FlashList over ScrollView

// ❌ ScrollView -- renders ALL items upfront, freezes on long lists
<ScrollView>
  {posts.map(p => <PostCard key={p.id} {...p} />)}
</ScrollView>

// ✅ FlashList -- virtualizes, renders only visible items
import { FlashList } from '@shopify/flash-list'

<FlashList
  data={posts}
  renderItem={({ item }) => <PostCard id={item.id} title={item.title} />}
  estimatedItemSize={88}
  keyExtractor={item => item.id}
 
 
  ListEmptyComponent={<EmptyState />}
  ListFooterComponent={isFetchingNextPage ? <ActivityIndicator /> : null}
/>

List Memoization Rules

// ❌ Object prop -- breaks memo, re-renders every time
<FlashList renderItem={({ item }) => <PostCard data={item} />} />

// ✅ Primitive props -- shallow comparison works
<FlashList renderItem={({ item }) => (
  <PostCard id={item.id} title={item.title} />
)} />

// ✅ Memoized item
const PostCard = memo(({ id, title, onPress }: PostCardProps) => ...)

// ✅ Hoisted callback -- stable reference
const handlePress = useCallback((id: string) => router.push({ pathname: '/(app)/[id]', params: { id } }), [])

// ✅ Memoized data
const filteredPosts = useMemo(() => posts.filter(p => p.active), [posts])

Heterogeneous Lists

type FeedItem = { type: 'post' | 'ad' | 'story' } & (PostItem | AdItem | StoryItem)

<FlashList
  data={feed}
  getItemType={item => item.type}
  estimatedItemSize={88}
  renderItem={({ item }) => {
    if (item.type === 'post') return <PostCard {...item} />
    if (item.type === 'ad') return <AdCard {...item} />
    return <StoryCard {...item} />
  }}
/>

Avoid Re-renders

// ❌ Inline object -- new reference every render
<Component style={{ color: 'red' }} options={{ timeout: 1000 }} />

// ✅ Outside component or useMemo
const STYLE = { color: 'red' as const }
const OPTIONS = { timeout: 1000 }

// ❌ Inline function -- new reference every render
<FlatList renderItem={({ item }) => <Item {...item} => handlePress(item.id)} />} />

// ✅ useCallback
const renderItem = useCallback(({ item }) => <Item {...item} />, [handlePress])

React Compiler (RN 0.76+, Expo SDK 52+)

Automatically removes memo, useCallback, useMemo where safe.

# Check if your code is compiler-ready
bunx react-compiler-healthcheck@latest

Write compiler-friendly code:

// ✅ Destructure functions at render top
function Screen({ onPress, onChange }: Props) {
  // Compiler can optimize these
  const handlePress = () => onPress()
  const handleChange = (v: string) => onChange(v)
}

// ❌ Dot-access in JSX
<Pressable => props.onPress()} />

Hermes

Enabled by default in Expo SDK 52+. Hermes benefits:

• Faster startup (bytecode pre-compilation)
• Lower memory usage
• Better GC

Ensure Hermes is enabled in app.json:

{ "expo": { "jsEngine": "hermes" } }

Animate GPU Properties Only

// ❌ Causes layout recalculation
width.value = withSpring(200)
marginTop.value = withTiming(20)

// ✅ GPU only
transform: [{ scale: scaleValue }]
opacity: opacityValue

Intl at Module Scope

// ❌ Created in render -- expensive
function formatDate(date: Date) {
  return new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date)
}

// ✅ Created once at module level
const dateFormatter = new Intl.DateTimeFormat('en-US', { month: 'short' })
function formatDate(date: Date) { return dateFormatter.format(date) }

Bundle Analysis

# Expo Atlas (most accurate for Expo)
EXPO_UNSTABLE_ATLAS=true bunx expo export
# Open .expo/atlas.jsonl in Atlas viewer

# Source map explorer
bunx source-map-explorer dist/index.js

Common bundle issues:

• Barrel exports (import { x } from 'big-library' loads everything)
• Moment.js (use dayjs instead)
• Duplicate packages (check bun why <package>)