Item Keys

React uses a unique key to identify each item in a list. By default, the Message List component uses the items numeric index for that, but this index might change as we load new messages or delete some. To address that, the message list exposes a computeItemKey prop. This prop should return a unique key for each item based on the item data.

Live Editor

function App() {

  return (
      <VirtuosoMessageListLicense licenseKey="">
        <VirtuosoMessageList
          computeItemKey={({ data }) => {
            return `item-${data}`
          }}
          style={{ height: 400 }}
          initialData={Array.from({ length: 100 }, (_, index) => index)}
        />
      </VirtuosoMessageListLicense>
  )
}

Result