Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
key prop कैसे React को list items पहचानने और DOM mutations कम करने में मदद करता है।
जब React elements की list render करता है, तो उसे जानना होता है कि renders के बीच कौन से items बदले, add हुए, या remove हुए। key prop के बिना, React position-based matching उपयोग करता है — index 0 का item, index 0 के item से map होता है। Keys के साथ, React renders के पार stable identity से items match कर सकता है, जिससे destroy-and-recreate की जगह efficient moves संभव होते हैं।
जब आपकी list re-render होती है, React के पास child elements के दो arrays होते हैं: पुराने और नए। इसे decide करना होता है कि क्या update करना है, क्या insert करना है, और क्या delete करना है।
React elements को उनकी index position से match करता है। यदि list [A, B, C] → [B, A, C] (reordered) हो जाए, React देखता है कि position 0, A से B बदला और position 1, B से A — जिससे दो updates और संभावित state loss होता है।
React key से fiber का map बनाता है। [A, B, C] का [B, A, C] बनना इस तरह दिखता है: 'key=b, position 1 से 0 पर moved, key=a, 1 से 0 पर moved'। React existing DOM nodes move करता है — कोई destroy/create cycle नहीं।
React 'Each child in a list should have a unique key prop' log करता है जब वह बिना keys की lists detect करता है। यह एक performance warning है — आपका app काम करता रहता है लेकिन कम efficiently render होता है।
किसी component की key बदलना React को बताता है 'यह बिल्कुल अलग instance है'। React पुराने component को unmount करेगा (सभी cleanups चलाते हुए) और एक fresh one mount करेगा। यह deliberately component state reset करने के लिए useful है।
एक key जो renders के पार एक item identify करती है — आमतौर पर database ID या slug। Siblings में unique होनी चाहिए।
Array index को key के रूप में उपयोग करना केवल static, non-reordering lists के लिए safe है। Dynamic lists के लिए, items reorder होने पर bugs आते हैं।
जब React key से पुराने और नए element को match करता है, तो existing DOM node reuse करता है और केवल changed attributes update करता है।
किसी component की key prop intentionally बदलना उसे reset करता है — items के बीच switch करते समय form state reset करने के लिए useful।
1// ❌ Bad — index as key on dynamic list2{todos.map((todo, index) => (3 <TodoItem key={index} todo={todo} />4))}5// If you delete item at index 0, all items shift — React6// sees every item as 'changed' and re-renders all of them.78// ✅ Good — stable unique ID9{todos.map((todo) => (10 <TodoItem key={todo.id} todo={todo} />11))}12// Deleting one item: React only removes that one node.13// All others are matched by key and kept untouched.1415// 🔄 Intentional reset via key change16<UserProfile key={userId} userId={userId} />17// Changing userId resets all internal state — no need for18// a manual reset effect.
Keys React का hint है पुराने और नए list items को match करने के लिए। एक अच्छी key का मतलब है React DOM nodes reuse कर सकता है (fast), component state preserve कर सकता है (correct), और minimal updates trigger कर सकता है (efficient)। एक बुरी key (या कोई key नहीं) का मतलब है React या तो ज़रूरत से बहुत ज़्यादा मेहनत करता है या unexpectedly component state खो देता है।
You have a form builder where users can add, remove, and reorder form fields via drag-and-drop. Each field has its own validation state and user input. After reordering, the input values appear in the wrong fields.
Using array index as key means when a user drags field 3 to position 1, React matches the component at position 1 (old field 1) with the new key=1 (field 3's new position). The old component instance retains field 1's input value but now renders field 3's label — a state/UI mismatch.
Assign each form field a stable UUID when created (e.g., `crypto.randomUUID()`). Use this as the key. Now drag-and-drop reordering just changes positions — React recognizes each component by its UUID and moves the DOM nodes without resetting any state.
Takeaway: For any list that supports add, remove, reorder, or filter operations, always use a stable unique ID as the key. Array index only works for truly static, never-reordered lists (like a static navigation menu).
A user profile edit form should reset to clean state whenever the selected user changes. You tried resetting state in useEffect but there's a flash of old data before the reset takes effect.
Setting state in useEffect happens AFTER render and paint. The sequence is: render (shows old user's data) → paint (user sees stale data) → useEffect fires (resets state) → re-render (shows new user's data). This causes a visible flash.
Add `key={userId}` to the form component. When userId changes, React sees a different key at the same position and unmounts the old instance entirely, creating a fresh one. No useEffect needed — the new instance starts with default initial state. Zero flash.
Takeaway: The `key` prop is not just for lists — it's a powerful tool to force React to destroy and recreate a component. Use it whenever you want a 'clean slate' without the complexity and timing issues of manually resetting state in useEffect.