Conditional Rendering & List Keys
Conditional rendering displays UI based on conditions, where the falsy zero (0 && <Component />) pitfall renders the literal number 0. Keys give list elements stable identities across renders, allowing React to match existing DOM nodes instead of re-creating or incorrectly recycling stateful elements.
Key Learning Objectives
Diagnose the falsy zero trap in JSX short-circuit conditional expressions.
Explain how React reconciles lists and why index as key causes state corruption on reordering.
Understand how changing a key forces React to reset component state and remount.
Formulate deterministic keys from stable data IDs.
The Interview Problem & Context
What is rendered to the DOM when the following component evaluates a zero count condition and reverses a list of stateful items indexed by array index?
1// Simulation of React rendering semantics2function simulateRender() {3 const count = 0;4 // Bug trap: 0 && <span /> evaluates to 0, which React renders as text!5 const conditionalOutput = count && 'Items Available';67 const hasItems = count > 0;8 const safeOutput = hasItems && 'Items Available';910 // List keyed with stable IDs: 'A', 'B', 'C' -> reversed to 'C', 'B', 'A'11 const items = ['A', 'B', 'C'];12 const reversed = [...items].reverse();13 const listKeys = reversed.join('-');1415 return `${conditionalOutput} ${Boolean(safeOutput)} ${listKeys}`;16}1718console.log(simulateRender());
Predict Console & Render Output
0 false C-B-A
null false C-B-A
false false A-B-C
0 true C-B-A
Execution Trace
Step 1 of 4 (Line 3)count is set to 0.
Deep Architectural Explanation
The Two Classic React Rendering Traps
1. The Falsy Zero Trap (0 && <Component />)
In JSX:
false,null,undefined, andtrueare valid children that render nothing.- The number
0is a valid child that renders "0" on the screen!
{count && <CartBadge count={count} />} {/* Renders "0" when count is 0! */}
{count > 0 && <CartBadge count={count} />} {/* Correct: renders nothing when 0 */}2. Why Index as Key Breaks State
React uses the key prop to match children between render passes. If you use the array index as the key:
- You insert an item at the beginning of the list.
- The new item gets key
0, the previous item gets key1. - React thinks key
0is the same component that existed before, preserving internal state (like uncontrolled input values or focus) on the wrong item! - Always use stable, unique data IDs (e.g.,
item.id) as keys.
Common Interview Traps & Pitfalls
Writing {items.length && <List />} which displays 0 when the list is empty.
Using Math.random() as a key, causing components to remount and lose state on every single render.
Using array index as key in dynamic, filterable, or reorderable lists.
Senior Interviewer Follow-Up Probes
Why does changing the key prop of a component force React to completely unmount and remount it?
How does React reconcile items when keys are swapped vs when elements have no keys at all?
Can you use index as key if the list is purely static and never filtered or reordered?
Frequently Asked Interview Questions
What is the purpose of the key prop in React lists?
Keys give elements a stable identity between renders, allowing React reconciliation to determine which items were added, removed, or moved rather than recreating the entire list.
What bugs happen when using array index as key?
When items are inserted, deleted, or reordered, keys shift. React associates component state (such as input text, checkboxes, or animations) with the key index, causing state to attach to the wrong data item.
Is it ever acceptable to use index as key?
Yes, only if the list is completely static: items never reorder, filter, add, or delete, and list items have no internal state.
How can changing a key prop be used intentionally to reset state?
Giving a component a key based on an ID (e.g., <UserProfile key={userId} />) causes React to unmount the old instance and mount a fresh component whenever the ID changes, cleanly resetting all state.