react-key-prop

React list rendering loses input state during sorting or filtering because unstable keys cause component state mismatches during reconciliation. Using array indexes as keys forces React to misapply state to the wrong DOM nodes when the list order changes.

Choose stable keys for dynamic React lists by applying unique identifiers from your data, such as database IDs. If items lack identifiers, generate one-time IDs using nanoid on data load to maintain stable component identity during reconciliation.

Array indexes are acceptable as React keys only in rare conditions where the list is strictly static, never reordered, filtered, or spliced. For dynamic lists, index keys break reconciliation and cause incorrect DOM updates and state bugs.

You should not use the useId hook to generate React list keys. Generating keys during render creates new identifiers on every render cycle, forcing unnecessary component remounts and breaking the stable identity required for proper state reconciliation.

Fix React key prop warnings and state bugs by replacing index or runtime-generated keys with stable unique IDs. Apply one-time generated identifiers when data loads to ensure list items maintain correct identity during DOM reconciliation.