React Native Expo Best Practices

Comprehensive performance optimization guide for React Native applications built with Expo, designed for AI agents and LLMs. Contains 45 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/Expo components
• Optimizing FlatList or list rendering performance
• Implementing navigation and screen transitions
• Adding animations with Reanimated
• Setting up data fetching and caching
• Reviewing code for performance issues
• Debugging frame drops or memory issues

Rule Categories by Priority

Quick Reference

1. App Startup Optimization (CRITICAL)

• launch-hermes-bytecode – Enable Hermes with Bytecode Compilation
• launch-dev-mode-testing – Disable Development Mode for Performance Testing
• launch-splash-screen – Configure Splash Screen to Hide After Content Ready
• launch-minimize-root-imports – Minimize Root-Level Imports
• launch-font-loading – Load Fonts Before Rendering Text
• launch-avoid-sync-storage – Avoid Synchronous Storage Reads at Startup

2. Bundle Size & Dependencies (CRITICAL)

• bundle-direct-imports – Use Direct Module Imports Instead of Barrel Files
• bundle-analyze-dependencies – Analyze Bundle Size Before Adding Dependencies
• bundle-dynamic-imports – Use Dynamic Imports for Large Features
• bundle-avoid-polyfills – Avoid Unnecessary Polyfills
• bundle-image-assets – Optimize Image Assets for Bundle Size

3. List Virtualization (CRITICAL)

• list-use-flashlist – Use FlashList Instead of FlatList for Large Lists
• list-getitemlayout – Implement getItemLayout for Fixed-Height Items
• list-stable-keys – Use Stable Keys Instead of Array Index
• list-memoize-renderitem – Memoize renderItem and List Item Components
• list-window-size – Tune windowSize for Memory vs Performance
• list-avoid-inline-styles – Avoid Inline Styles in List Items
• list-remove-clipped-subviews – Enable removeClippedSubviews for Long Lists

4. Navigation & Routing (HIGH)

• nav-async-routes – Enable Async Routes for Lazy Screen Loading
• nav-avoid-usenavigation-rerenders – Avoid useNavigation Re-render Issues
• nav-alphabetical-loading – Control Route Loading Order with Naming
• nav-preload-screens – Preload Screens Before Navigation
• nav-deep-link-performance – Optimize Deep Link Resolution

5. Data Fetching Patterns (HIGH)

• data-parallel-fetching – Fetch Independent Data in Parallel
• data-request-deduplication – Deduplicate Concurrent Requests
• data-abort-requests – Abort Requests on Component Unmount
• data-optimistic-updates – Use Optimistic Updates for Instant Feedback
• data-pagination – Implement Efficient Pagination for Large Datasets
• data-cache-strategies – Configure Appropriate Cache Strategies

6. Re-render Prevention (MEDIUM)

• render-memo-components – Wrap Expensive Components with memo()
• render-usememo-expensive – Memoize Expensive Computations with useMemo
• render-usecallback-handlers – Stabilize Event Handlers with useCallback
• render-context-splitting – Split Context to Prevent Unnecessary Re-renders
• render-avoid-anonymous-functions – Avoid Anonymous Functions in JSX
• render-react-compiler – Enable React Compiler for Automatic Memoization

7. Animation Performance (MEDIUM)

• anim-use-reanimated – Use Reanimated for 60 FPS Animations
• anim-worklets – Use Worklets for UI Thread Computation
• anim-layout-animations – Use Layout Animations for Mount/Unmount
• anim-avoid-js-thread – Avoid JS Thread During Animations
• anim-limit-concurrent – Limit Concurrent Animations

8. Memory & Resource Management (LOW-MEDIUM)

• mem-useeffect-cleanup – Clean Up Resources in useEffect
• mem-expo-image – Use expo-image for Efficient Image Caching
• mem-avoid-closures-leaks – Avoid Closure Memory Leaks
• mem-monitor-memory – Monitor Memory Usage in Development
• mem-lazy-components – Lazy Load Heavy Components

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

Reference Files