Expo React Native Performance Best Practices

Comprehensive performance optimization guide for Expo React Native applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Writing new React Native components or screens
• Implementing lists with FlatList or FlashList
• Adding animations or transitions
• Optimizing images and asset loading
• Reviewing code for performance issues

Rule Categories by Priority

startup-

list-

rerender-

anim-

asset-

mem-

async-

platform-

Quick Reference

1. App Startup & Bundle Size (CRITICAL)

• startup-enable-hermes

  - Enable Hermes JavaScript engine

• startup-remove-console-logs

  - Remove console logs in production

• startup-splash-screen-control

  - Control splash screen visibility

• startup-preload-assets

  - Preload critical assets during splash

• startup-async-routes

  - Use async routes for code splitting

• startup-cherry-pick-imports

  - Use direct imports instead of barrel files

2. List Virtualization (CRITICAL)

• list-use-flashlist

  - Use FlashList instead of FlatList

• list-estimated-item-size

  - Provide accurate estimatedItemSize

• list-get-item-type

  - Use getItemType for mixed lists

• list-stable-render-item

  - Stabilize renderItem with useCallback

• list-get-item-layout

  - Provide getItemLayout for fixed heights

• list-memoize-items

  - Memoize list item components

3. Re-render Optimization (HIGH)

• rerender-use-memo-expensive

  - Memoize expensive computations

• rerender-use-callback-handlers

  - Stabilize callbacks with useCallback

• rerender-functional-setstate

  - Use functional setState updates

• rerender-lazy-state-init

  - Use lazy state initialization

• rerender-split-context

  - Split context by update frequency

• rerender-derive-state

  - Derive state instead of syncing

4. Animation Performance (HIGH)

• anim-use-native-driver

  - Enable native driver for animations

• anim-use-reanimated

  - Use Reanimated for complex animations

• anim-layout-animation

  - Use LayoutAnimation for simple transitions

• anim-transform-not-dimensions

  - Animate transform instead of dimensions

• anim-interaction-manager

  - Defer heavy work during animations

5. Image & Asset Loading (MEDIUM-HIGH)

• asset-use-expo-image

  - Use expo-image for image loading

• asset-prefetch-images

  - Prefetch images before display

• asset-optimize-image-size

  - Request appropriately sized images

• asset-use-webp-format

  - Use WebP format for images

• asset-recycling-key

  - Use recyclingKey in FlashList images

6. Memory Management (MEDIUM)

• mem-cleanup-subscriptions

  - Clean up subscriptions in useEffect

• mem-clear-timers

  - Clear timers on unmount

• mem-abort-fetch

  - Abort fetch requests on unmount

• mem-avoid-inline-objects

  - Avoid inline objects in props

• mem-limit-list-data

  - Limit list data in memory

7. Async & Data Fetching (MEDIUM)

• async-parallel-fetching

  - Fetch independent data in parallel

• async-defer-await

  - Defer await until value needed

• async-batch-api-calls

  - Batch related API calls

• async-cache-responses

  - Cache API responses locally

• async-refetch-on-focus

  - Refetch data on screen focus

8. Platform Optimizations (LOW-MEDIUM)

• platform-android-overdraw

  - Reduce Android overdraw

• platform-ios-text-rendering

  - Optimize iOS text rendering

• platform-android-proguard

  - Enable ProGuard for Android release

• platform-conditional-render

  - Platform-specific optimizations

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Full Compiled Document

For the complete guide with all rules expanded, see AGENTS.md.

Reference Files