Cursor rule

1---
2alwaysApply: false
3---
4 
5## Avoid Inline Objects in renderItem
6 
7Don't create new objects inside `renderItem` to pass as props. Inline objects
8create new references on every render, breaking memoization. Pass primitive
9values directly from `item` instead.
10 
11**Incorrect (inline object breaks memoization):**
12 
13```tsx
14function UserList({ users }: { users: User[] }) {
15  return (
16    <LegendList
17      data={users}
18      renderItem={({ item }) => (
19        <UserRow
20          // Bad: new object on every render
21          user={{ id: item.id, name: item.name, avatar: item.avatar }}
22        />
23      )}
24    />
25  )
26}
27```
28 
29**Incorrect (inline style object):**
30 
31```tsx
32renderItem={({ item }) => (
33  <UserRow
34    name={item.name}
35    // Bad: new style object on every render
36    style={{ backgroundColor: item.isActive ? 'green' : 'gray' }}
37  />
38)}
39```
40 
41**Correct (pass item directly or primitives):**
42 
43```tsx
44function UserList({ users }: { users: User[] }) {
45  return (
46    <LegendList
47      data={users}
48      renderItem={({ item }) => (
49        // Good: pass the item directly
50        <UserRow user={item} />
51      )}
52    />
53  )
54}
55```
56 
57**Correct (pass primitives, derive inside child):**
58 
59```tsx
60renderItem={({ item }) => (
61  <UserRow
62    id={item.id}
63    name={item.name}
64    isActive={item.isActive}
65  />
66)}
67 
68const UserRow = memo(function UserRow({ id, name, isActive }: Props) {
69  // Good: derive style inside memoized component
70  const backgroundColor = isActive ? 'green' : 'gray'
71  return <View style={[styles.row, { backgroundColor }]}>{/* ... */}</View>
72})
73```
74 
75**Correct (hoist static styles in module scope):**
76 
77```tsx
78const activeStyle = { backgroundColor: 'green' }
79const inactiveStyle = { backgroundColor: 'gray' }
80 
81renderItem={({ item }) => (
82  <UserRow
83    name={item.name}
84    // Good: stable references
85    style={item.isActive ? activeStyle : inactiveStyle}
86  />
87)}
88```
89 
90Passing primitives or stable references allows `memo()` to skip re-renders when
91the actual values haven't changed.
92 
93**Note:** If you have the React Compiler enabled, it handles memoization
94automatically and these manual optimizations become less critical.
95