Subchapter 4.13

List Performance Callbacks

rules/list-performance-callbacks.mdMarkdown1 KBView on GitHub

List performance callbacks

Impact: HIGH (Fewer re-renders and faster lists)

When passing callback functions to list items, create a single instance of the callback at the root of the list. Items should then call it with a unique identifier.

List Performance Callbacks · Vercel React Native Skills · vercel-labs/agent-skills · Skills Docs

return (
  <LegendList
    renderItem={({ item }) => {
      // bad: creates a new callback on each render
      const onPress = () => handlePress(item.id)
      return <Item key={item.id} item={item} onPress={onPress} />
    }}
  />
)

const onPress = useCallback(() => handlePress(item.id), [handlePress, item.id])

return (
  <LegendList
    renderItem={({ item }) => (
      <Item key={item.id} item={item} onPress={onPress} />
    )}
  />
)