React.js
Angular
Ethical Hacking
Agile
AWS
BlockChain
Cassandra
Cloud
Salesforce
Scaled Agile
TOGAF
DevOps
GIT
Jenkins
Jira
Kibana
Linux
NGINX
Ansible
Artificial Intelligence
in React JS by

What is the impact of indexes as keys?

Click here to read more about DevOps

1 Answer

0 votes
by

Keys should be stable, predictable, and unique so that React can keep track of elements.

In the below code snippet each element's key will be based on ordering, rather than tied to the data that is being represented. This limits the optimizations that React can do.

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

If you use element data for unique key, assuming todo.id is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.

{todos.map((todo) =>
  <Todo {...todo}
    key={todo.id} />
)}

Related questions

Madanswer
0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
...