Keys

Also called key prop

What is Keys in React Native?

A key is a stable identifier you give each item in a rendered list so React can tell which item is which across renders instead of re-creating them all.

Typed input (component state)State on the wrong rowRow in the listReact matches list items between renders by key. Keyed by a stable id, a row keeps its state, here the text typed into its input, wherever it moves. Keyed by the array index, React matches by position: insert a row at the top and the state stays at index 1, so it shows up on a different user. Keys only need to be unique among siblings; in a FlatList, keyExtractor does the same job.

A key is a string you attach to each element in a list so React can match items between renders. Without keys React compares by position, so inserting one row at the top makes it think every row changed.

{
  users.map((user) => <UserRow key={user.id} user={user} />);
}

Rules that matter in practice:

Use a value that is stable and unique among siblings — a database id, not a random number.
Do not use the array index when the list can reorder, filter, or receive inserts. Index keys are the usual cause of "the wrong row kept its text input value".
Keys only need to be unique within one list, not app-wide.

In FlatList the same job is done by the keyExtractor prop rather than a key on the element. Getting keys wrong shows up as lost scroll position, wrong animations, and state landing on the wrong row.

See rendering lists.