Cursor rule

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