rn-performancelisted
Install: claude install-skill aiskillstore/marketplace
# 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
```typescript
// ✅ CORRECT: Stable function reference
const keyExtractor = useCallback((item: Session) => item.id, []);
<FlatList
data={sessions}
keyExtractor={keyExtractor}
renderItem={renderItem}
/>
// ❌ WRONG: Creates new function every render
<FlatList
data={sessions}
keyExtractor={(item) => item.id}
renderItem={renderItem}
/>
// ❌ WRONG: Using index (causes issues with reordering/deletion)
keyExtractor={(item, index) => `${index}`}
```
### getItemLayout - Fixed Height Items
```typescript
const ITEM_HEIGHT = 80;
const SEPARATOR_HEIGHT = 1;
const getItemLayout = useCallback(
(data: Session[] | null | undefined, index: number) => ({
length: ITEM_HEIGHT,
offset: (ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
index,
}),
[]
);
<FlatList
data={sessions}
getItemLayout={getItemLayout}
// ... other props
/>
```
**Why it matters:** Without `getItemLayout`, FlatList must measure each item, causing scroll jank.
### renderItem - Memoized
```typescript
// Extract to named component
const SessionItem = memo(function SessionItem({
session,
onPress
}: {
session: Session;