Explain index as key can be ok
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
The pitfall warning on https://beta.reactjs.org/learn/rendering-lists states that using index or random for keys is bad. However, this is the only mention of using indexes of keys. I think it should state that using indexes is bad, but it should also be clear that using random values much worse.
The problem is using index as key is a well known anti-pattern in the React world. People come up with much worse solutions, e.g. use a random key, to get rid of ESLint warnings.
Also there are legitimate use cases for an index as a key, for example when rendering a static list of data. I think this should be acknowledged in the Where to get your key section.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the Rendering Lists page at https://beta.reactjs.org/learn/rendering-lists and read the pitfall warning and the “Where to get your key” section. Update the explanation so it distinguishes index keys from random keys and acknowledges static lists as a legitimate index-key case; done means the guidance is clear and consistent in both places.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100