Keys concept in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of keys in React lists?

Keys help React identify which items have changed, been added, or removed. They make updates faster and keep UI consistent.

beginner

Why should keys be unique among siblings in a list?

Unique keys prevent React from mixing up elements. If keys repeat, React may reuse wrong elements causing bugs.

intermediate

Is using array index as a key always a good idea? Why or why not?

Using index as key is okay only if list items never change order or get removed. Otherwise, it can cause wrong UI updates.

beginner

What happens if you forget to add keys to list items in React?

React will warn you in the console. Without keys, React can't track items well, leading to slower updates and possible UI glitches.

intermediate

How do keys affect React's reconciliation process?

Keys let React match old and new elements during reconciliation. This helps React update only changed parts efficiently.

What should a key in a React list be?

A Unique among siblings

B The same for all items

C A random number every render

D Always the array index

Keys must be unique among siblings to help React track elements correctly.

What is a risk of using array index as a key when list items change order?

A React may reuse wrong elements causing UI bugs

B No risk, it's always safe

C It makes React slower

D It causes syntax errors

Using index as key when items reorder can confuse React, leading to wrong UI updates.

If you forget keys in a list, what will React do?

A Crash the app

B Show a warning in the console

C Automatically add keys

D Ignore the list

React warns you in the console if keys are missing in lists.

Keys help React to:

A Style the list items

B Fetch data from server

C Handle user input

D Identify which items changed during updates

Keys help React identify changed, added, or removed items for efficient updates.

Which of these is a good choice for a key?

A Random number generated on render

B Current timestamp

C User ID from database

D Array index when list changes often

Stable unique IDs like user IDs are best keys to keep UI consistent.

Explain why keys are important in React lists and what can go wrong if keys are missing or not unique.

Think about how React updates list items efficiently.

Describe when it is okay and not okay to use array index as a key in React lists.

Consider what happens when list items move around.