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