Why We Need Keys In React

Have you used keys in React?

If not, then we mostly use them when we loop through an array using array.map() inside JSX as shown below.

<div>
{users.map(user => <div key={user.userId}>{user.name}</div>)}
</div>

If you don't use key, it throws a warning that we need to use a key. But why exactly?

The key is used so React can identify the elements in the array correctly. Let's look into code above, as you can see we have users array and we are looping through it. It displays user name in a div. It's a simple logic, but for react it's all same divs. You can see that user names are different so they are different divs, but for React it doesn't know. So we pass keys to React so that it can identify the divs correctly.

But why do React need to know that? Let's understand with examples below

Using Index as keys

People say that you shouldn't use index as keys. But, you can. If your array is static i.e. You are not removing any elements then using index as keys is fine.

But if your array is changing, you are removing elements then? Let's understand