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[blocked] - Enable Hermes JavaScript enginestartup-remove-console-logs[blocked] - Remove console logs in productionstartup-splash-screen-control[blocked] - Control splash screen visibilitystartup-preload-assets[blocked] - Preload critical assets during splashstartup-async-routes[blocked] - Use async routes for code splittingstartup-cherry-pick-imports[blocked] - Use direct imports instead of barrel files
2. List Virtualization (CRITICAL)
list-use-flashlist[blocked] - Use FlashList instead of FlatListlist-estimated-item-size[blocked] - Provide accurate estimatedItemSizelist-get-item-type[blocked] - Use getItemType for mixed listslist-stable-render-item[blocked] - Stabilize renderItem with useCallbacklist-get-item-layout[blocked] - Provide getItemLayout for fixed heightslist-memoize-items[blocked] - Memoize list item components
3. Re-render Optimization (HIGH)
rerender-use-memo-expensive[blocked] - Memoize expensive computationsrerender-use-callback-handlers[blocked] - Stabilize callbacks with useCallbackrerender-functional-setstate[blocked] - Use functional setState updatesrerender-lazy-state-init[blocked] - Use lazy state initializationrerender-split-context[blocked] - Split context by update frequencyrerender-derive-state[blocked] - Derive state instead of syncing
4. Animation Performance (HIGH)
anim-use-native-driver[blocked] - Enable native driver for animationsanim-use-reanimated[blocked] - Use Reanimated for complex animationsanim-layout-animation[blocked] - Use LayoutAnimation for simple transitionsanim-transform-not-dimensions[blocked] - Animate transform instead of dimensionsanim-interaction-manager[blocked] - Defer heavy work during animations
5. Image & Asset Loading (MEDIUM-HIGH)
asset-use-expo-image[blocked] - Use expo-image for image loadingasset-prefetch-images[blocked] - Prefetch images before displayasset-optimize-image-size[blocked] - Request appropriately sized imagesasset-use-webp-format[blocked] - Use WebP format for imagesasset-recycling-key[blocked] - Use recyclingKey in FlashList images
6. Memory Management (MEDIUM)
mem-cleanup-subscriptions[blocked] - Clean up subscriptions in useEffectmem-clear-timers[blocked] - Clear timers on unmountmem-abort-fetch[blocked] - Abort fetch requests on unmountmem-avoid-inline-objects[blocked] - Avoid inline objects in propsmem-limit-list-data[blocked] - Limit list data in memory
7. Async & Data Fetching (MEDIUM)
async-parallel-fetching[blocked] - Fetch independent data in parallelasync-defer-await[blocked] - Defer await until value neededasync-batch-api-calls[blocked] - Batch related API callsasync-cache-responses[blocked] - Cache API responses locallyasync-refetch-on-focus[blocked] - Refetch data on screen focus
8. Platform Optimizations (LOW-MEDIUM)
platform-android-overdraw[blocked] - Reduce Android overdrawplatform-ios-text-rendering[blocked] - Optimize iOS text renderingplatform-android-proguard[blocked] - Enable ProGuard for Android releaseplatform-conditional-render[blocked] - Platform-specific optimizations
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions [blocked] - Category structure and impact levels
- Rule template [blocked] - Template for adding new rules
Full Compiled Document
For the complete guide with all rules expanded, see AGENTS.md [blocked].


