Keys: index vs id when a row is added at the top
The typed text lives in the DOM input, which belongs to a fiber matched by key. With index keys, key 0 is now Meera's row, so she inherits Asha's input. With id keys, React moves Asha's row and inserts a new one for Meera.
The questions almost every React interview asks (virtual DOM, keys, controlled vs uncontrolled inputs, state vs props, the component lifecycle in hooks, StrictMode and more) with model answers and live demos that prove the tricky claims.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a TodoList that renders todos (objects with id and text) with correct keys and a delete button per item.
Make a Search component with a controlled input that trims leading spaces as you type and shows Searching for: <text> below it.
Write a Timer effect that logs tick every second while mounted and stops on unmount.
Explain it without notes
What is the virtual DOM, and how does React use it to update the page?
Why do lists need keys, and when is the array index a bad key?
Explain controlled vs uncontrolled inputs. When would you use each?
What's the difference between state and props? What goes wrong if you copy a prop into state?
How do you express mount, update and unmount with hooks?
Preview
Console
Nothing logged yet.Expected console output
key = index: Meera=likes tea, Asha=(empty), Ravi=(empty)
key = id: Meera=(empty), Asha=likes tea, Ravi=(empty)