React Best Practices Challenge

Demo

To V improved

  • - Index as a key is an anti-pattern.

Index as a key is an anti-pattern

How to NOT React: Common Anti-Patterns and Gotchas in React

  • Unique — The key of an element should be unique among its siblings. It is not necessary to have globally unique keys.
  • Stable — The key for the same element should not change with time, or page refresh, or re-ordering of elements.
  • Predictable — You can always get the same key again if you want. That is, the key should not be generated randomly.

Array indexes are unique, and predictable. However, they are not stable. In the same vein, random numbers or timestamps should not be used as keys.

In general, you should rely on the ID generated by databases such as primary key in Relational databases ...

  • - Typechecking.

  • - Missing dependencies. (Using --save do save u)

  • - Avoid unnecessary re-rendering.

To observe the shouldComponentUpdate():

Edit Update