Discussion on "Why React Keys Matter: An Introduction"

Victoria Lo · 2020-09-15T03:59:45.400Z

When working with any type of list in React, you will often encounter this warning if you forgot to include a key prop: Warning: Each child in a list should have a unique “key” prop So, why does React tell you to include keys and why is it important...

Is the "key" attribute special or does React look for any attribute? I have a list of divs where the "title" attribute uniquely identifies the object - will that work just as well?

Excellent writeup on the importance of key in React. However, are you sure the diffing is done on the virtual DOM and real DOM? To my understanding, the reconciliation happens between the most recent virtual DOM tree and the previous tree.

Thank you for the correction. You are right, I meant to write that diffing is done between the old and virtual DOM in order to then update the real DOM. Sorry for the confusion.

Well explained Victoria Lo, thanks for sharing!

Always a pleasure :)

So true! Recently I had a requirement to refresh a component, I initially thought of creating a state variable and refresh it based on that but adding a key solved the issue. I was looking for an article to explain "behind the scenes" and I landed here... Thank you so much for explaining! :)

No problem! Glad it helped :)

Thanks! Glad you like it :)

Interesting. I did not know about that. I never came across that.

So from what I understand, react does not re-render the input field when using index. That's why there is this issue. Am I right?

In React, components will automatically re-render if there are state changes. In this case, the input field does not re-render because there is no change in its value.

And because its key is mapped to the index instead of id, the position of the input field does not change with its corresponding list item.

Search Hashnode

Why React Keys Matter: An Introduction

Responses6