Keys in react

  1. Reconciliation and keys
  2. Reusing key and normalization
  3. Using key to render only one element
  4. Working with key in children
Try to add “Richard” to the end, and then “Max” to the beginning. Pay attention to the console.
Video demo
  1. Two elements with different types produce different trees. Consequently, as soon as you change element type from a div to a section or any other tag, react will decide trees in the div and the section as different. Even if you change only the tag. React will remove tree from the div and mount all elements into the section. It also means, if you change one react component to another the situation will be the same (trees will be resolved as different), even their content is similar.
Pay attention, when you add element to the beginning of the list, react will change\create only one component
Try to select people from different teams and switch between those teams.
  1. Data isn’t normalized. We have to do some additional operations.
  2. There are duplicated keys in the developer entity. Therefore, react doesn‘t recreate the component, but just updates it. This leads to side-effects.
  1. When entity mutates, element with the same key will be updated.
  2. If element with the key doesn’t exist anymore, instance with such key will be removed.
  3. New instances will be created with the new keys without duplication.
  1. If you don’t set up keys, the reconciliation mechanism will compare components in pairs between actual and new VDOM. So, it’s possible to produce a lot of unnecessary changes.
  2. When you add a key, reconciliation will search component or element with the same key (tag or component name is important). Consequently, you optimize the number of DOM updates.
  3. Make sure that there are no duplicating keys in your lists. This can lead to undesirable side-effects, such as unnecessary animations or an incorrect behavior of the element.
  4. In rare cases, the key may be specified for the single element. This reduces the size of the code and makes it easier to understand. But the scope of this approach is limited.
  5. key and ref are special props in react. They can’t be accessed through the prop object and they are inaccessible from the component instance. We can access child.key or child.ref from the parent component which receives the children prop, but it’s a pretty bad practice. If you need key value in a component, just duplicate it in id prop.

Lead developer at

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Re-Take & Overview JavaScript

Top ten interview questions for Javascript

WordPress: Contact Form 7 Fallback Json Problem

5 Simple Dynamic Programming Algorithms in JavaScript

How to Update Node.js Version on Mac?

Convert a React Component to Vue.js

Meta image stating Convert a Component Built in ReactJS to VueJS alongside Timeline component

What is a Test Plan?

GSoC 2020 with SCoRe Lab — Week 14

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store