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

Priority	Category	Impact	Prefix
1	App Startup Optimization	CRITICAL	launch-
2	Bundle Size & Dependencies	CRITICAL	bundle-
3	List Virtualization	CRITICAL	list-
4	Navigation & Routing	HIGH	nav-
5	Data Fetching Patterns	HIGH	data-
6	Re-render Prevention	MEDIUM	render-
7	Animation Performance	MEDIUM	anim-
8	Memory & Resource Management	LOW-MEDIUM	mem-

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

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information