performance-optimize

What problem does it solve?

React Native (Expo) apps often feel slow due to oversized bundles, excessive re-renders, non-virtualized lists, unoptimized images, inefficient network usage, and slow initial startup.

Core Features & Use Cases

• Bundle Size Optimization: Identify heavy dependencies, remove unnecessary packages, use more granular imports, and reduce what gets shipped to users.
• Rendering Optimization: Remove needless re-renders using React.memo, useCallback, useMemo, and optimize Zustand subscriptions to only read what is needed.
• List Virtualization: Improve scrolling performance by replacing FlatList with FlashList and applying required props like keyExtractor and estimatedItemSize.
• Image Optimization: Use expo-image to enable caching and better image handling, including sensible placeholders and sizing.
• Network Optimization: Reduce query payloads, add pagination, leverage indexing, and improve fetching patterns (including parallel requests and caching strategy).
• App Start Time Optimization: Speed up perceived startup by deferring heavy initialization and keeping splash screen behavior aligned with fast readiness.

Quick Start

Use the performance-optimize skill to optimize your Expo app by addressing bundle size, rendering, list virtualization, images, network calls, and initial loading performance, then generate a before/after performance report at _workspace/09_performance_report.md.