Use Keys to Keep Track of Elements3:58 with Guil Hernandez
React manages what gets rendered to the DOM. In order for this process to be fast and efficient, React needs a way to quickly know which items were changed, added, or removed. For this, React gives elements a special built-in prop named
key. A key is a unique identifier that gives React a way to quickly and reliably identify an element in a list.
React does not recommend using index for unique keys, because the index might not always uniquely identify elements. It's usually best to use a unique id.
According to the React docs:
We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
In most apps, you will have a list of sibling elements that get updated, 0:00 removed, added and reordered on the page. 0:04 For example, items in a to-do list app, a list of guests in an RSVP app, 0:07 or in our case, a list of players. 0:11 React manages what gets rendered to the DOM and displayed on the screen. 0:14 In order for this process to be fast and efficient, 0:18 React needs a way to quickly know which items were changed, added, or removed. 0:20 For this, React gives elements a special built-in prop named key. 0:24 A key is a unique identifier that gives React a way to quickly and 0:29 reliably identify an element in the list. 0:33 So the counsel warning each child in an array or 0:36 iterator should have a unique key prop means that each item or 0:40 player returns by the map function should be given a unique key prop. 0:44 React is asking us to specify a key prop on each player component to 0:48 keep track of it and differentiate each component from its sibling. 0:53 Since our players will eventually be added and removed from the scoreboard, 0:58 it's a good idea to resolve this now. 1:01 So we're going to provide a unique key to each player in our array of players. 1:03 First, I'll add an ID property to the first player object and 1:08 set the value to 1, then I'll give the remaining objects an ID property and 1:12 set each to a different number. 1:17 Now in our map function where we create our players, 1:27 we need to pass player a new prop named Key, and 1:32 has the value pass it an ID with player.id. 1:37 Now the React docs recommend that we use a string as the key value, so 1:41 to convert our ID into a string, I'll call the two string method on player.id. 1:46 I'll save the file, check the console, and now the warning is gone. 1:53 Looking in React dev tools, 1:57 we see that each player component has a key prop with a unique value. 2:00 Again, keys need to be unique and should not be reused. 2:05 For example if I add a duplicate ID in one of the player objects, React 2:09 is going to output the warning encountered to children with the same key 2. 2:14 Keys should be unique, and so on. 2:21 And you're not always going to create keys manually like this. 2:24 If your data comes from an API, for example, 2:28 there usually will be a unique ID for each item that you could use for key values. 2:30 Since our data comes from the static list we're creating the ID property manually. 2:35 But in the next course I'll teach you how to auto generate different IDs for 2:41 player objects. 2:45 And not all React elements need a key prop. 2:46 Pass a key prop anytime you're creating elements by iterating over 2:50 an array of items that will be rearranged, added or deleted in your UI. 2:55 The key will help React identify which items were changed, added or 3:00 removed from the DOM. 3:05 You can learn more tips and best practices for working with keys and 3:06 the teacher's notes with this video. >> Our scoreboard application is 3:09 starting to take shape but it's still static. 3:13 The player's display never changes because we're passing a static list of players to 3:16 our app, and the counter doesn't change a player's score. 3:20 In order to add dynamic behavior and interactions, 3:24 our app needs data that can change. 3:27 A web application's UI is normally a function of the data you put into it. 3:29 In other words, changes in your data result in changes to the UI, and 3:34 when changes are made to the UI your data changes in response. 3:38 In the next stage, I'll introduce you to the concept of state in a React component. 3:42 State is used to store information about a component that can change over time. 3:47 You'll learn how components, props, and 3:52 state work together to build interactive React applications. 3:54 See you soon. 3:57
You need to sign up for Treehouse in order to download course files.Sign up