1---
2title: Keep List Items Lightweight
3impact: HIGH
4impactDescription: reduces render time for visible items during scroll
5tags: lists, performance, virtualization, hooks
6---
7 
8## Keep List Items Lightweight
9 
10List items should be as inexpensive as possible to render. Minimize hooks, avoid
11queries, and limit React Context access. Virtualized lists render many items
12during scroll—expensive items cause jank.
13 
14**Incorrect (heavy list item):**
15 
16```tsx
17function ProductRow({ id }: { id: string }) {
18  // Bad: query inside list item
19  const { data: product } = useQuery(['product', id], () => fetchProduct(id))
20  // Bad: multiple context accesses
21  const theme = useContext(ThemeContext)
22  const user = useContext(UserContext)
23  const cart = useContext(CartContext)
24  // Bad: expensive computation
25  const recommendations = useMemo(
26    () => computeRecommendations(product),
27    [product]
28  )
29 
30  return <View>{/* ... */}</View>
31}
32```
33 
34**Correct (lightweight list item):**
35 
36```tsx
37function ProductRow({ name, price, imageUrl }: Props) {
38  // Good: receives only primitives, minimal hooks
39  return (
40    <View>
41      <Image source={{ uri: imageUrl }} />
42      <Text>{name}</Text>
43      <Text>{price}</Text>
44    </View>
45  )
46}
47```
48 
49**Move data fetching to parent:**
50 
51```tsx
52// Parent fetches all data once
53function ProductList() {
54  const { data: products } = useQuery(['products'], fetchProducts)
55 
56  return (
57    <LegendList
58      data={products}
59      renderItem={({ item }) => (
60        <ProductRow name={item.name} price={item.price} imageUrl={item.image} />
61      )}
62    />
63  )
64}
65```
66 
67**For shared values, use Zustand selectors instead of Context:**
68 
69```tsx
70// Incorrect: Context causes re-render when any cart value changes
71function ProductRow({ id, name }: Props) {
72  const { items } = useContext(CartContext)
73  const inCart = items.includes(id)
74  // ...
75}
76 
77// Correct: Zustand selector only re-renders when this specific value changes
78function ProductRow({ id, name }: Props) {
79  // use Set.has (created once at the root) instead of Array.includes()
80  const inCart = useCartStore((s) => s.items.has(id))
81  // ...
82}
83```
84 
85**Guidelines for list items:**
86 
87- No queries or data fetching
88- No expensive computations (move to parent or memoize at parent level)
89- Prefer Zustand selectors over React Context
90- Minimize useState/useEffect hooks
91- Pass pre-computed values as props
92 
93The goal: list items should be simple rendering functions that take props and
94return JSX.
95