React: Using 'null' on key prop

[SrBrahma]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
Keys are always needed on iterated elements.

We should be able to pass _null_ to the key prop, on iterated elements. Sometimes, we don't really need performance on so simple components that doesn't update frequently, and wouldn't do any bad if it have to re-render all the generated elements. Having to take some time to think about how to generate a key in every specific case can be a pain, like when we can't just use the index, or don't trust random generations.

I don't think it should also apply to undefined value, as it wouldn't encourage new programmers to learn and use key prop. Null should only be applied to those specific cases where we don't really care about performance.

Thanks!

[kambleaa007]

we do need to pass keys when we are iterating over them its an approach to uniquely identify elements

[svltmccc]

I don't think this is a useful feature. React should promote to write well fast code but null to the key will lead to existence a lot bad code in the community. In other word i think this is bad practice

[kunukn]

For reference here is the docs about the keys.
https://reactjs.org/docs/lists-and-keys.html#keys

If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

And a React warning is console logged.

---

Is the proposal that

const todoItems = todos.map(todo =>
  <li key={null}>
    {todo.text}
  </li>
);

Should have same out-come as this?

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

[kambleaa007]

lets, just close the issue, or add label discussion

[embeddedt]

Sometimes, we don't really need performance on so simple components that doesn't update frequently, and wouldn't do any bad if it have to re-render all the generated elements.

The problem goes beyond performance. If you ever have to move an item in the hierarchy, React will not render things properly if there isn't a stable key to work off of.

• If you don't need to move items, just use the index as a key. It's not that hard or messy to pass one more prop to the component.
• If you do need to move items, you need to use a key, because otherwise the renderer doesn't understand which item moved where.

[aweary]

Closing for the reasons that @embeddedt and others have pointed out.