list performance inline objects

Avoid Inline Objects in renderItem

Don't create new objects inside renderItem to pass as props. Inline objects create new references on every render, breaking memoization. Pass primitive values directly from item instead.

Incorrect (inline object breaks memoization):

function UserList({ users }: { users: User[] }) {
  return (
     (
        
      )}
    />
  )
}

Incorrect (inline style object):

renderItem={({ item }) => (
  
)}

Correct (pass item directly or primitives):

function UserList({ users }: { users: User[] }) {
  return (
     (
        // Good: pass the item directly
        
      )}
    />
  )
}

Correct (pass primitives, derive inside child):

renderItem={({ item }) => (
  
)}

const UserRow = memo(function UserRow({ id, name, isActive }: Props) {
  // Good: derive style inside memoized component
  const backgroundColor = isActive ? 'green' : 'gray'
  return 
})

Correct (hoist static styles in module scope):

const activeStyle = { backgroundColor: 'green' }
const inactiveStyle = { backgroundColor: 'gray' }

renderItem={({ item }) => (
  
)}

Passing primitives or stable references allows memo() to skip re-renders when the actual values haven't changed.

Note: If you have the React Compiler enabled, it handles memoization automatically and these manual optimizations become less critical.