React Keys解析：Input组件用defaultValue时的键行为探究

Great question—let’s break down exactly what’s happening with each key scenario and why switching from defaultValue to value changes things, step by step. First, a quick recap: React uses keys to track which list items have changed, been added, or been removed. They’re critical for the diffing algorithm to avoid unnecessary DOM re-renders and keep component states tied to the right elements.

1. Using Array Indexes as Keys #

• Behavior: Works fine for static lists that never change order or have items added/removed. But when you modify the list (e.g., add an item to the start or middle), indexes get reassigned. React will mistakenly reuse existing components instead of creating new ones, because it sees the same index key and assumes the element is the same—just with updated props.
• Example: Suppose you have a list ["a", "b", "c"] with keys 0, 1, 2. If you add "d" to the start, the new list has keys 0: "d", 1: "a", 2: "b", 3: "c". React will update the component with key 0 to show "d" (instead of creating a new component for "d"), key 1 to show "a", and so on. Any state tied to those components (like input values) will carry over incorrectly.
• Impact with value vs defaultValue: With defaultValue, the input’s value is managed by the DOM after initialization, so you might not notice the issue immediately. But with value (controlled components), the input’s value is strictly tied to React state. When React reuses the wrong component, the value prop will still point to the old state, causing the display to mismatch what you expect.

2. Using Random Unique Numbers as Keys #

• Behavior: Every time your component renders, the random key changes. React treats every list item as a brand-new element, so it destroys all existing components and rebuilds them from scratch.
• Problems: This completely negates React’s performance optimizations (since it can’t reuse any components). Worse, any state stored in those components (like typed input values) will be lost on every render, because the component gets reinitialized. Adding a new item will reset all existing inputs to their default values.
• Never use this: Random keys defeat the entire purpose of using keys in the first place.

3. Using Constant Unique Identifiers as Keys #

• Behavior: This is React’s recommended best practice. Use a fixed, unique value tied directly to the item (like a database ID, or a UUID generated once when the item is created). React can accurately track each item’s position—when you add/remove items, it only creates/destroys the components for the affected keys, leaving others untouched.
• Impact: Component states stay correctly tied to their items. With controlled inputs (value), the state and DOM will always match. With defaultValue, inputs retain their user-entered values even as the list changes. Performance is optimized because React only updates what’s necessary.

Why Switching to value Breaks the Last Item’s Update? #

Let’s tie this together with your observation:

• defaultValue is for uncontrolled inputs: React sets the initial value once, then the DOM manages the input’s state. Even if keys are wrong, the DOM keeps the value the user typed, so you might not see the mismatch.
• value is for controlled inputs: The input’s value is entirely controlled by React state. When you use a bad key (like an index), React reuses an old component for a new item. That component’s value prop is still bound to the old state entry, so it displays the old value instead of the new item’s value. For example, adding a new item to the end with index keys might cause React to reuse the last component’s state, showing the old value instead of the new one.

Final Takeaways #

• Avoid indexes as keys unless your list is 100% static (no adds/removes/reorders).
• Never use random keys—they cause unnecessary re-renders and state loss.
• Always use fixed, unique identifiers (like item IDs) for keys.
• Controlled inputs (value) are far more sensitive to key errors because they rely on React state to sync with the DOM. Uncontrolled inputs (defaultValue) hide the issue but still have underlying state mismatches.

内容的提问来源于stack exchange，提问作者crazyCoder