Search for a command to run...
Understand what really happens when you don't pass the key prop when rendering a list in React
Backend developer with strong experience in the .NET ecosystem and AWS. Other development skills include JavaScript/React/Vue, HTML, CSS.
No comments yet. Be the first to comment.
According to the React docs: useDebugValue is a React Hook that lets you add a label to a custom Hook in React DevTools. When do I need useDebugValue? useDebugValue becomes important when you implement a custom hook. For example, let's say you have...
According to the React docs: useRef is a React Hook that lets you reference a value that’s not needed for rendering. Here are two examples where useRef should be used: Referencing a value with a ref Manipulating the DOM with a ref Referencing a...
Implement AWS Cognito authentication using Authorization Code Grant with hosted UI into your Nextjs application
Start writing your own Cypress tests in React
Have you ever wondered why the key prop is so required when rendering lists in React? In this article, I will break down why you need to pass the prop, and what might happen when you don't.
Here is an example that I have plagiarised from the React docs. The following code will iterate through each person, and display it inside a <li> tag.
function People() {
const people = [
'Creola Katherine Johnson: mathematician',
'Mario José Molina-Pasquel Henríquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist'
];
return (
<ul>
{people.map(person => <li>{person}</li>)}
</ul>
)
}
If you've been using React for a while, you likely will have seen the following error:
Warning: Each child in a list should have a unique "key" prop.
But what is the key prop actually for? I've never encountered any issues not passing a key prop. According to the React Docs:
Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen
keyhelps React infer what exactly has happened, and make the correct updates to the DOM tree.
None of the above explains what happens if I don't pass a key prop. But after a lot of research, I have been able to demonstrate a concrete example.
The first example of when the key prop is needed is when there is state managed in the DOM, not React. For example, state managed by the DOM can include form inputs, scroll position, CSS transitions etc.
In the example below, I have an array of numbers: [1, 2, 3, 4, 5] . These numbers are rendered as a list alongside an uncontrolled text input. I have populated the defaultValue attribute with the number.
When you shuffle the list, the order of the numbers changes, but the values in the input fields do not. This is because React cannot track the values accurately when committing the changes to the DOM.
The below example is exactly the same, except the key prop is passed into each list item. As you can see, the input values are correctly updated.
If you don't pass anything to the key prop, React uses the index as the key by default. So you will have the same issue as the above example.