Cursor rule

1---
2alwaysApply: false
3---
4 
5## Pass Primitives to List Items for Memoization
6 
7When possible, pass only primitive values (strings, numbers, booleans) as props
8to list item components. Primitives enable shallow comparison in `memo()` to
9work correctly, skipping re-renders when values haven't changed.
10 
11**Incorrect (object prop requires deep comparison):**
12 
13```tsx
14type User = { id: string; name: string; email: string; avatar: string }
15 
16const UserRow = memo(function UserRow({ user }: { user: User }) {
17  // memo() compares user by reference, not value
18  // If parent creates new user object, this re-renders even if data is same
19  return <Text>{user.name}</Text>
20})
21 
22renderItem={({ item }) => <UserRow user={item} />}
23```
24 
25This can still be optimized, but it is harder to memoize properly.
26 
27**Correct (primitive props enable shallow comparison):**
28 
29```tsx
30const UserRow = memo(function UserRow({
31  id,
32  name,
33  email,
34}: {
35  id: string
36  name: string
37  email: string
38}) {
39  // memo() compares each primitive directly
40  // Re-renders only if id, name, or email actually changed
41  return <Text>{name}</Text>
42})
43 
44renderItem={({ item }) => (
45  <UserRow id={item.id} name={item.name} email={item.email} />
46)}
47```
48 
49**Pass only what you need:**
50 
51```tsx
52// Incorrect: passing entire item when you only need name
53<UserRow user={item} />
54 
55// Correct: pass only the fields the component uses
56<UserRow name={item.name} avatarUrl={item.avatar} />
57```
58 
59**For callbacks, hoist or use item ID:**
60 
61```tsx
62// Incorrect: inline function creates new reference
63<UserRow name={item.name} onPress={() => handlePress(item.id)} />
64 
65// Correct: pass ID, handle in child
66<UserRow id={item.id} name={item.name} />
67 
68const UserRow = memo(function UserRow({ id, name }: Props) {
69  const handlePress = useCallback(() => {
70    // use id here
71  }, [id])
72  return <Pressable onPress={handlePress}><Text>{name}</Text></Pressable>
73})
74```
75 
76Primitive props make memoization predictable and effective.
77 
78**Note:** If you have the React Compiler enabled, you do not need to use
79`memo()` or `useCallback()`, but the object references still apply.
80