Expo React Native Performance

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

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