From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Keys, reconciliation, and summary

Keys, reconciliation, and summary

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Keys, reconciliation, and summary

“

Welcome back, now let's understand what is the importance of keys. If you go back to module number 1 where we discussed about the React's rendering algorithm, you know that React creates a virtual DOM out of the main DOM. It compares every element on the basis of a unique key. If we are introducing a list to be rendered on the screen, we should be providing a unique value using which React can find out what element has changed and what React should do about it. Keys help React to identify which item of the key has changed. It prevents unnecessary re-rendering. If only one item of the key has changed, React will only change that specific item. It allows React to run the efficient diffing algorithm in the virtual DOM. This is one example of using a map and in the li elements, we are using the key as unique ID. Let's see that as an example. We have this country's code, which we saw in the previous video. Let's see the output for this. In the main DOM, you can see that you have three li…

Contents