Common list rendering mistakes in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why should you always provide a key prop when rendering lists in React?

The key helps React identify which items changed, were added, or removed. This improves performance and prevents bugs during re-rendering.

intermediate

What happens if you use the array index as the key in a list?

Using the index as key can cause problems when the list changes order or items are added/removed. React may reuse components incorrectly, causing UI bugs.

beginner

What is a common mistake when rendering lists without unique keys?

React will warn about missing keys, and without unique keys, it can't track items properly. This can lead to unexpected UI updates or incorrect component states.

intermediate

Why should list items be stable and not change their key between renders?

If keys change, React treats items as new and recreates them, losing any local state or causing unnecessary re-renders.

beginner

What mistake can happen if you forget to return the list item inside a map()?

If you forget to return the JSX inside map(), the list will render empty or undefined items, causing no visible output or errors.

What is the main purpose of the key prop in React list rendering?

A To add event listeners to list items

B To uniquely identify list items for efficient updates

C To style the list items differently

D To sort the list items automatically

The key helps React track items between renders for better performance and correct UI updates.

Which of these is a bad choice for a key in a dynamic list?

A A UUID generated once per item

B A stable string unique to each item

C A unique ID from data

D The array index

Using the array index as key can cause bugs when the list changes order or items are added/removed.

What happens if you render a list without any key props?

A React warns and may update inefficiently

B React throws a runtime error

C The list items get styled differently

D Nothing happens, it works perfectly

React warns about missing keys and may have inefficient or buggy updates without keys.

Why is it important that keys remain stable between renders?

A To add animations to list items

B To change the order of items automatically

C To keep component state and avoid unnecessary re-renders

D To prevent React from rendering the list

Stable keys help React keep track of components and preserve their state.

What mistake causes a list to render nothing when using map()?

A Not returning the JSX element inside <code>map()</code>

B Using unique keys

C Using <code>filter()</code> instead of <code>map()</code>

D Adding keys to list items

If you forget to return the JSX inside map(), the list renders empty.

Explain why keys are important in React list rendering and what can go wrong if they are missing or unstable.

Think about how React tracks items between renders.

Describe a common mistake when using map() to render lists and how to fix it.

Check your arrow function syntax inside <code>map()</code>.