Interview Q&A / React

1. Why do keys matter when rendering lists in React?

   Keys tell React which list item is which between renders, so it can keep the right state with the right item when the list changes order, grows or shrinks.

   BeginnerIn-depth2 min read
2. How do you render a list in React and handle the empty case?

   Use array.map inside JSX to turn data into elements with keys. Check the array length first and show an empty-state message when there is nothing to display, instead of rendering a blank area.

   BeginnerQuick answer1 min read
3. Is it fine to use the array index as a key in a React list?

   Only when the list is static: never reordered, filtered, or inserted into. If items can move or be removed, index keys make React reuse the wrong component state and DOM, so use a stable ID from the data.

   BeginnerQuick answer1 min read
4. What warning do you get if you forget the key prop in a list, and what does it cost?

   React logs a warning that each child in a list needs a unique key. It falls back to using index, so the list still renders, but reordering can cause wrong state reuse and unnecessary DOM updates.

   BeginnerQuick answer1 min read