Agent skill · software engineering · aiskillstore
rn-performance
Performance optimization for React Native. Use when optimizing lists, preventing re-renders, memoizing components, or debugging performance issues in Expo/React Native apps.
Why this skill is useful
Provides specific optimization patterns and code examples for improving React Native app performance that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Native Performance Problem Statement React Native performance issues often stem from unnecessary re-renders, unoptimized lists, and expensive computations on the JS thread. This codebase has performance-critical areas (shot mastery, player lists) with established optimization patterns. --- Pattern: FlatList Optimization keyExtractor - Stable Keys getItemLayout - Fixed Height Items Why it matters: Without getItemLayout, FlatList must measure each item, causing scroll jank. renderItem - Memoized Additional Optimizations --- Pattern: FlashList for Large Lists When to use: 1000+ items, complex item components, or FlatList still janky. Note: This codebase doesn't currently use FlashList. Consider for coach player lists. --- Pattern: Memoization useMemo - Expensive Computations When to use useMemo: Array transformations (filter, sort, map chains) Object creation passed to memoized children Computations with O(n) or higher complexity useCallback - Stable Function References When to use useCallback: Callbacks passed to memoized children Callbacks in dependency arrays Event handlers that would cause child re-renders --- Pattern: React.memo When to use React.memo: List item components Components receiving stable primitive props Components that render frequently but rarely change When NOT to use: Components that always receive new props Simple components (overhead > benefit) Root-level screens --- Pattern: Zustand Selector Optimization Problem: Selecting entire store causes re-render on any state change. See also: rn-zustand-patterns/SKILL.md for more Zustand patterns. --- Pattern: Image Optimization --- Pattern: Avoiding Re-Renders Object/Array Stability Children Stability --- Pattern: Detecting Re-Renders React DevTools Profiler 1. Open React DevTools 2. Go to Profiler tab 3. Click record, interact, stop 4. Review "Flamegraph" for render times 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/rn-performance