mobile-perf

dtsvetkov1's avatarfrom dtsvetkov1

Optimizes React Native Expo applications for speed, responsiveness, and battery efficiency. Use when fixing lag, optimizing lists, or reducing bundle size.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 27, 2025
[Debugging]

When & Why to Use This Skill

The Mobile Performance Skill is a specialized tool for optimizing React Native and Expo applications to achieve peak speed, responsiveness, and battery efficiency. It focuses on eliminating UI lag, optimizing heavy list rendering, and reducing JavaScript bundle sizes. By leveraging advanced techniques like UI-thread animations and efficient memory management, it ensures a high-performance, 'butter-smooth' user experience across mobile platforms.

Use Cases

  • Eliminating Scroll Lag: Optimizing complex lists by implementing LegendList or fine-tuning FlatList properties to ensure smooth scrolling with large datasets.
  • Reducing App Load Times: Analyzing and shrinking the JavaScript bundle size using tools like expo-bundle-analyzer to improve initial launch speed.
  • Smooth UI Animations: Refactoring animations to run exclusively on the UI thread using react-native-reanimated, preventing frame drops during heavy JS execution.
  • Resource & Battery Optimization: Identifying memory leaks and minimizing bridge traffic to reduce power consumption and improve overall app stability.
namemobile-perf
descriptionOptimizes React Native Expo applications for speed, responsiveness, and battery efficiency. Use when fixing lag, optimizing lists, or reducing bundle size.

Mobile Performance Skill

This skill focuses on delivering a "butter-smooth" user experience.

Focus Areas

  • List Optimization: Use LegendList or highly optimized FlatList settings.
  • Animation Performance: Ensure all animations run on the UI thread using react-native-reanimated.
  • Image Handling: Use expo-image for caching and performant loading.
  • JS Bundle Size: Analyze and reduce the size of the JavaScript bundle.
  • Memory Leaks: Identify and fix component memory leaks or excessive re-renders.

Instructions

  1. Profile: Identify the bottleneck (JS thread vs UI thread).
  2. Optimize Lists: Use removeClippedSubviews, maxToRenderPerBatch, and initialNumToRender.
  3. Memoization: Apply useMemo and useCallback judiciously to prevent unnecessary renders.
  4. Bridge Traffic: Minimize the data sent across the React Native bridge.
  • Flashlight for performance testing.
  • react-devtools for profiling renders.
  • expo-bundle-analyzer to check bundle composition.