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