Expanding on the @Deadfish answer. Let's say you have 10 todo items, and each item has state (e.g. whether it is in editing mode).

On the next render pass, there are only 9 todo items left. E.g. because you deleted one of the items.

Now react needs to know which of the original 10 items are still left, so it can preserve the state of each item, and re-render only items that changed state.

That is what react uses the key for. If you use the index as the key, then the original keys were 0..9. And the new keys are 0..8.

This can cause several problems:

React will ALWAYS conclude that you deleted the last item in the list, which is not necessarily correct. There are other posts on SO about this, e.g this one

React will ALWAYS conclude that the items did not change order, so react will think that any state of original item no 5 will still be state of item no 5. But if you deleted eg. item no. 3, then all items should have moved up in the list. which is what the other answer pointed out.

If the items in the list do not have any state (only props) - e.g. the title of your todo - then your rendering will become very inefficient. If you delete the first item, then react will conclude that ALL items now have a new text, and will re-render ALL remaining items (instead of efficiently deleting just the first item from the DOM).

Using unique and constant keys - so not just unique in a single render run, but especially constant over multiple render-cycles - will ensure that everything works as intended, and will ensure react updates DOM efficiently.