question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add no-array-index-key to recommended configuration

See original GitHub issue

This rule prevents the use of Array index in key. It seems useful enough to turn on as a recommended rule. Thoughts?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:13 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
jeffvandykecommented, Jun 28, 2017

It’s WAY too strong of a rule, IMO. I’ve got an array of strings, how can I possibly concisely display it in a list of

  • 's without using index as the key? It’s simply the cleanest way to do it without React throwing a warning.

    I still can’t think of how you could determine if a component is “simple enough” to not have a useful id field. That would be best, if possible, but I don’t think it is.

  • 2reactions
    jeffvandykecommented, Jun 28, 2017

    As a matter of fact, at the bottom of the Keys section in React docs, it explicitly says: “When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort”. For my use case above, which is not rare, what better alternative is there?

    Read more comments on GitHub >

    github_iconTop Results From Across the Web

    Add no-array-index-key to recommended configuration #1049
    This rule prevents the use of Array index in key. It seems useful enough to turn on as a recommended rule. Thoughts?
    Read more >
    12 essential ESLint rules for React - LogRocket Blog
    To use the recommended configuration which activates both rules, you'll need to update your ESLint configuration file, adding an entry to ...
    Read more >
    Reiterating why you should never use Array 'index' as 'key' in ...
    Keys help React identify which items have changed, are added, or are removed. So it is highly recommended to use unique identifiers as...
    Read more >
    error: Do not use Array index in keys - Stack Overflow
    The issue with using key={index} happens whenever the list is modified. React doesn't understand which item was added/removed/reordered since ...
    Read more >
    eslint-plugin-react - npm
    This plugin exports a recommended configuration that enforces React good practices. ... See ESLint documentation for more information about ...
    Read more >

    github_iconTop Related Medium Post

    No results found

    github_iconTop Related StackOverflow Question

    No results found

    github_iconTroubleshoot Live Code

    Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
    Start Free

    github_iconTop Related Reddit Thread

    No results found

    github_iconTop Related Hackernoon Post

    No results found

    github_iconTop Related Tweet

    No results found

    github_iconTop Related Dev.to Post

    No results found

    github_iconTop Related Hashnode Post

    No results found