Rendering lists in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the key prop when rendering lists in React?

The key prop helps React identify which items have changed, been added, or removed. It improves performance by allowing React to update only the necessary elements in the list.

beginner

How do you render a list of items in React?

You use the JavaScript map() method on an array to create an array of React elements. Each element should have a unique key prop.

intermediate

Why should list keys be unique and stable?

Keys must be unique and stable so React can correctly match elements between renders. Using indexes as keys can cause bugs if the list changes order or items are added/removed.

beginner

What happens if you forget to add a key prop to list items in React?

React will show a warning in the console. Without keys, React may re-render list items inefficiently, causing performance issues or unexpected UI behavior.

intermediate

Can you use any value as a key in React lists? What should you avoid?

You can use any unique and stable value as a key, like an ID from your data. Avoid using array indexes as keys if the list can change, because it can cause UI bugs.

What React method is commonly used to render a list of items?

A filter()

B map()

C reduce()

D forEach()

The map() method transforms each item in an array into a React element for rendering.

Why is the key prop important in list rendering?

A It sorts the list items

B It styles the list items

C It adds event listeners automatically

D It helps React track items for efficient updates

Keys help React identify which items changed, improving rendering performance.

Which of these is a bad choice for a React list key?

A Array index when list changes

B Unique user ID

C Stable product code

D UUID string

Using array indexes as keys can cause bugs if the list order changes or items are added/removed.

What will React do if list items lack a key prop?

A Show a warning in the console

B Automatically generate keys

C Ignore the list

D Crash the app

React warns you in the console to add keys for better list rendering.

Which is the best practice for keys in React lists?

A Use array indexes always

B Use random numbers each render

C Use unique and stable IDs from data

D Use the item’s display text

Unique and stable IDs ensure React can track items correctly across renders.

Explain how to render a list of items in React and why the key prop is necessary.

Think about how React knows which items changed.

Describe what can go wrong if you use array indexes as keys in React lists.

Imagine rearranging or adding items in a list.