list performance item memo

Pass Primitives to List Items for Memoization

When possible, pass only primitive values (strings, numbers, booleans) as props to list item components. Primitives enable shallow comparison in memo() to work correctly, skipping re-renders when values haven't changed.

Incorrect (object prop requires deep comparison):

type User = { id: string; name: string; email: string; avatar: string }

const UserRow = memo(function UserRow({ user }: { user: User }) {
  // memo() compares user by reference, not value
  // If parent creates new user object, this re-renders even if data is same
  return {user.name}
})

renderItem={({ item }) => }

This can still be optimized, but it is harder to memoize properly.

Correct (primitive props enable shallow comparison):

const UserRow = memo(function UserRow({
  id,
  name,
  email,
}: {
  id: string
  name: string
  email: string
}) {
  // memo() compares each primitive directly
  // Re-renders only if id, name, or email actually changed
  return {name}
})

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

Pass only what you need:

// Incorrect: passing entire item when you only need name

// Correct: pass only the fields the component uses

For callbacks, hoist or use item ID:

// Incorrect: inline function creates new reference
 handlePress(item.id)} />

// Correct: pass ID, handle in child

const UserRow = memo(function UserRow({ id, name }: Props) {
  const handlePress = useCallback(() => {
    // use id here
  }, [id])
  return {name}
})

Primitive props make memoization predictable and effective.

Note: If you have the React Compiler enabled, you do not need to use memo() or useCallback(), but the object references still apply.