Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use a List Virtualizer for Any List
6 
7Use a list virtualizer like LegendList or FlashList instead of ScrollView with
8mapped children—even for short lists. Virtualizers only render visible items,
9reducing memory usage and mount time. ScrollView renders all children upfront,
10which gets expensive quickly.
11 
12**Incorrect (ScrollView renders all items at once):**
13 
14```tsx
15function Feed({ items }: { items: Item[] }) {
16  return (
17    <ScrollView>
18      {items.map((item) => (
19        <ItemCard key={item.id} item={item} />
20      ))}
21    </ScrollView>
22  )
23}
24// 50 items = 50 components mounted, even if only 10 visible
25```
26 
27**Correct (virtualizer renders only visible items):**
28 
29```tsx
30import { LegendList } from '@legendapp/list'
31 
32function Feed({ items }: { items: Item[] }) {
33  return (
34    <LegendList
35      data={items}
36      // if you aren't using React Compiler, wrap these with useCallback
37      renderItem={({ item }) => <ItemCard item={item} />}
38      keyExtractor={(item) => item.id}
39      estimatedItemSize={80}
40    />
41  )
42}
43// Only ~10-15 visible items mounted at a time
44```
45 
46**Alternative (FlashList):**
47 
48```tsx
49import { FlashList } from '@shopify/flash-list'
50 
51function Feed({ items }: { items: Item[] }) {
52  return (
53    <FlashList
54      data={items}
55      // if you aren't using React Compiler, wrap these with useCallback
56      renderItem={({ item }) => <ItemCard item={item} />}
57      keyExtractor={(item) => item.id}
58    />
59  )
60}
61```
62 
63Benefits apply to any screen with scrollable content—profiles, settings, feeds,
64search results. Default to virtualization.
65