Will It Vibe?Array index used as a list key
Part of Code Quality & Syntax, which counts for 20% of the overall score. When this check fires it deducts 4 points from that category, once per scan, no matter how many places it turns up.
What it detects
Using the array index as a React key breaks reconciliation when the list is reordered, filtered, or has items inserted/removed: React reuses the wrong DOM/state and inputs, selections, and animations attach to the wrong row. Heuristic: an index key is acceptable for a static, append-only list.
Why it matters
Using the array index as a key tells React that item N is always the same item, so when the list is reordered, filtered, or has a row inserted or removed, React reuses the wrong DOM and component state. The classic symptom is a typed value or a checkbox staying with the wrong row after the list changes. This is a heuristic: for a list that never reorders and only appends, an index key is acceptable.
How to fix it
Key each item by a stable unique identifier from the data (item.id, a slug, a composite of fields that is unique and stable). Only fall back to the index when the list is static and never reordered, and leave a comment saying so. Do not use the index just because it is convenient.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo