expo-react-native-performance
pproenca/dot-skills
42 performance optimization rules for Expo React Native apps, organized by impact.
What is expo-react-native-performance?
Comprehensive guide for optimizing Expo React Native applications across startup time, list rendering, re-renders, animations, images, memory, async operations, and platform-specific concerns. Use when writing, reviewing, or refactoring React Native code to apply proven performance patterns.
- Provides 42 prioritized rules across 8 performance categories (startup, lists, re-renders, animations, images, memory, async, platform)
- Guides optimization of app startup time and bundle size with Hermes and code splitting
- Improves list performance via FlashList, virtualization, and memoization techniques
- Reduces unnecessary re-renders through memo, useCallback, and context splitting
- Optimizes animations with native drivers and Reanimated library
- Enhances image loading with expo-image, prefetching, and WebP format
How to install expo-react-native-performance
npx skills add https://github.com/pproenca/dot-skills --skill expo-react-native-performanceHow to use expo-react-native-performance
- 1.Identify the performance category relevant to your task (startup, lists, re-renders, animations, images, memory, async, or platform)
- 2.Review the specific rule references in that category for detailed explanations and code examples
- 3.Apply the recommended pattern to your code, prioritizing CRITICAL and HIGH impact rules first
- 4.Reference the full AGENTS.md document for complete rule definitions and additional context
Use cases
- Refactoring a slow-scrolling FlatList to use FlashList with proper memoization and estimatedItemSize
- Reducing app startup time by enabling Hermes engine and implementing code splitting with async routes
- Optimizing animation performance in a complex UI by switching to native drivers or Reanimated
- Improving image loading performance by prefetching assets and converting to WebP format
- Reviewing code for memory leaks from uncleared subscriptions and timers before production release
- React Native developers building Expo apps
- Mobile engineers optimizing app performance and startup time
- Code reviewers ensuring performance best practices are followed
- Teams migrating from FlatList to FlashList or implementing complex animations
expo-react-native-performance FAQ
CRITICAL rules (startup and list virtualization) have the most significant impact on app performance and should be applied first. HIGH priority rules (re-renders and animations) provide substantial improvements but may require more refactoring effort.
Use FlashList instead of FlatList for better performance, especially with large lists. Provide accurate estimatedItemSize and use getItemType for mixed-type lists.
Enable the Hermes JavaScript engine, remove console logs in production, implement code splitting with async routes, cherry-pick imports instead of using barrel files, and preload critical assets during the splash screen.
Enable the native driver for Animated API, use Reanimated for complex animations, animate transform properties instead of dimensions, and defer heavy work during animations using InteractionManager.
Clean up subscriptions, clear timers, and abort fetch requests in useEffect cleanup functions. Avoid inline objects in props and limit list data held in memory.
Full instructions (SKILL.md)
Source of truth, from pproenca/dot-skills.
name: expo-react-native-performance description: Expo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optimal performance patterns. Triggers on tasks involving React Native components, lists, animations, images, or performance improvements.
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
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | App Startup & Bundle Size | CRITICAL | startup- |
| 2 | List Virtualization | CRITICAL | list- |
| 3 | Re-render Optimization | HIGH | rerender- |
| 4 | Animation Performance | HIGH | anim- |
| 5 | Image & Asset Loading | MEDIUM-HIGH | asset- |
| 6 | Memory Management | MEDIUM | mem- |
| 7 | Async & Data Fetching | MEDIUM | async- |
| 8 | Platform Optimizations | LOW-MEDIUM | platform- |
Quick Reference
1. App Startup & Bundle Size (CRITICAL)
startup-enable-hermes- Enable Hermes JavaScript enginestartup-remove-console-logs- Remove console logs in productionstartup-splash-screen-control- Control splash screen visibilitystartup-preload-assets- Preload critical assets during splashstartup-async-routes- Use async routes for code splittingstartup-cherry-pick-imports- Use direct imports instead of barrel files
2. List Virtualization (CRITICAL)
list-use-flashlist- Use FlashList instead of FlatListlist-estimated-item-size- Provide accurate estimatedItemSizelist-get-item-type- Use getItemType for mixed listslist-stable-render-item- Stabilize renderItem with useCallbacklist-get-item-layout- Provide getItemLayout for fixed heightslist-memoize-items- Memoize list item components
3. Re-render Optimization (HIGH)
rerender-use-memo-expensive- Memoize expensive computationsrerender-use-callback-handlers- Stabilize callbacks with useCallbackrerender-functional-setstate- Use functional setState updatesrerender-lazy-state-init- Use lazy state initializationrerender-split-context- Split context by update frequencyrerender-derive-state- Derive state instead of syncing
4. Animation Performance (HIGH)
anim-use-native-driver- Enable native driver for animationsanim-use-reanimated- Use Reanimated for complex animationsanim-layout-animation- Use LayoutAnimation for simple transitionsanim-transform-not-dimensions- Animate transform instead of dimensionsanim-interaction-manager- Defer heavy work during animations
5. Image & Asset Loading (MEDIUM-HIGH)
asset-use-expo-image- Use expo-image for image loadingasset-prefetch-images- Prefetch images before displayasset-optimize-image-size- Request appropriately sized imagesasset-use-webp-format- Use WebP format for imagesasset-recycling-key- Use recyclingKey in FlashList images
6. Memory Management (MEDIUM)
mem-cleanup-subscriptions- Clean up subscriptions in useEffectmem-clear-timers- Clear timers on unmountmem-abort-fetch- Abort fetch requests on unmountmem-avoid-inline-objects- Avoid inline objects in propsmem-limit-list-data- Limit list data in memory
7. Async & Data Fetching (MEDIUM)
async-parallel-fetching- Fetch independent data in parallelasync-defer-await- Defer await until value neededasync-batch-api-calls- Batch related API callsasync-cache-responses- Cache API responses locallyasync-refetch-on-focus- Refetch data on screen focus
8. Platform Optimizations (LOW-MEDIUM)
platform-android-overdraw- Reduce Android overdrawplatform-ios-text-rendering- Optimize iOS text renderingplatform-android-proguard- Enable ProGuard for Android releaseplatform-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
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Related skills
More from pproenca/dot-skills and the wider catalog.
framer-motion
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
nuqs
Type-safe URL query state management best practices for Next.js and React frameworks.
react-hook-form
React Hook Form performance optimization guide with 35 best-practice rules across form configuration, subscriptions, and validation.
react-refactor
Architectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and cohesion, data flow, and refactoring safety. Use when refactoring React codebases, reviewing PRs for architectural issues, decomposing oversized components, or improving module boundaries. Does NOT cover React 19 API usage (see react skill) or performance optimization (see react-optimise skill).
shadcn
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.
terminal-ui
Terminal User Interface (TUI) performance and UX guidelines for TypeScript applications using Ink and Clack. This skill should be used when building CLI tools, interactive terminal prompts, or developer tooling with TUI components. Triggers on tasks involving TUI components, CLI prompts, terminal rendering, keyboard input handling, or developer tooling.