list performance callbacks

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.

Incorrect (creates a new callback on each render):

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

Correct (a single function instance passed to each item):

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

return (
   (
      
    )}
  />
)

Reference: Link to documentation or resource