DEV Community

Cover image for The significance of React keys - a visual explanation

The significance of React keys - a visual explanation

Josh Tonzing on February 15, 2018

Disclaimer: This is a gross oversimplification and should be used as a basic guide on how reconciliation works, not a perfect example! When handli...
Collapse
 
edmundcwm profile image
edmundcwm

Regarding the opening statement - '...utilisation of the 'key' attribute on each element can be crucial for avoiding needless rerender performance hits.', am I right to say that the 'key' attribute doesn't prevent or reduce the number of times a component is re-rendered? Instead, it's more of making React's life easier when it comes to deciding what change is needed to update the browser DOM?

Love the explanation btw!

Collapse
 
ashwath26 profile image
Ashwathns

Very nice explanation, finally understood :)

Collapse
 
stupidlymoron profile image
Khan Irfan • Edited

Typo in 3rd image / Code snippet

<div>
    <span key=’0’>Josh</span>
    <span key=’1’>Joshina</span>
    <span key=’3’>Notjosh</span> (here)
</div>
Enter fullscreen mode Exit fullscreen mode

last span should have key = '2'.

Collapse
 
niinpatel profile image
Nitin Patel

Great explanation! I now finally understand why keys are needed when rendering component arrays!

Collapse
 
efrenshou profile image
Efrén Vázquez Solís

I felt this article like some "explain to me like I'm 5" tutorial so it was very clear for me, thank you for this post.

Collapse
 
runyaozhang profile image
RunyaoZhang

Finally understood!!! Thanks so much!

Collapse
 
samaid2025 profile image
Samaid2025

Finally. Went through a lot of jibberish on React Keys. This article explains it in the most simple and clear way

Collapse
 
dgrinderhz profile image
Hassan Zekkouri

So using items ID is supposed to be better as it is unique in the DB.

Collapse
 
yousefebrahim profile image
YOUSEF EBRAHIM

Great explanation!