React-Key What-Why-How?
There is a special prop called “Key“ in React but what is that? What does it do? Why should we know it?.
Every developer who works with React probably has already seen this error.
What does this error really mean? It means React needs a unique “Key” prop to distinguish the items in a list. With that, React can decide which item is inserted, removed, or updated.
Let’s see this in an example.
Notes:
1- Clicking on a “Red item” increases the “number” by 10.
2- Clicking on a “Insert to top” button inserts a new item to the top of the list.
3- Clicking on the “Reset” button resets the lists.
4- Changing background color means an item force re-rendered and that means completely removed from DOM and re-adding.
5- You can follow force re-renders with the spinning stick on the right of the items.
In the example above, we see 3 different examples of usage. Let’s review them.
1 - Common Usage
In this example, the “key” prop is set as the “index” of the item. In most cases, this is ok but in this example, the button inserts the new item to the top of the list. So, the newly added item’s index will be already on the list and the last item’s index will change each time a new item is added. This may cause some issues.
For example:
- Any “useEffect” that has the “number” in its dependency array in the component will run each time a new item is added. Because even if the “number” hasn’t changed, the element’s key has changed. So, this is a reason to re-render according to React.
- Each time a new item is added, only the last item’s “useEffect” with an empty dependency array will run. Because the only changing “key” is its.
- The item which is newly added will act as if only its props have changed. So this is actually wrong!
2 - Wrong Usage
In this example, the “key” prop is set as the “number” of the item. In most cases, this could be ok if its “number” props would be true if it wasn’t going to change. But in this example, it will change. So whenever you clicked on an item, the item’s “number” will change with a random number and this will trigger a force re-render. This may cause some issues.
For example:
- Clicking on any item will trigger a force re-render. The force re-rendered item’s “useEffect” will run on each changing of the “number”.
- This may make you think in the wrong way while debugging.
- Unwanted/Unexpected re-calls in the component’s “useEffect”.
- Performance issues for bigger components.
3 - Right Usage
In this example, “Key” is set as the “ID” of the item. The rightest way is using a unique variable for the “key” prop.
- In the list, when a new item is added only the new item’s “useEffect”s will run.
- Changing an item’s “number” or other props will re-render only the item which is clicked not force re-render.
Another little-known thing is that the “key” prop can be used in any component. It doesn’t have to be used in a list. You can force a re-render by changing the key. Let’s see this in an example.
In the example, the “key” prop of the red box is the value in the input and the box has a CSS animation that changes background-color from “cornflowerblue” to “crimson”. Every time the “update” button is clicked with a different value will trigger a force re-render. Because of that, the initial animation of the box plays again. You can create a simple animation to point out the changes in your components. It wouldn’t happen if the “key” prop wasn’t passed.
Thank you for reading. I hope it was helpful to you. I look forward to your questions and comments.
