README.md

Practice Project: Quiz App

1. Add Project (Boilerplate)
2. Add Components & States
3. Derive Values, Output Questions & Register Answers
4. Shuffle Answers & Add Quiz Logic
5. Add Question Timers
6. Highlight Selected Answers & Manage More State
7. Move State Down
8. Set Different Timers based on the Selected Answer
9. Output Quiz Results

key and its significance in Listing in ReactJS

In React, keys are unique identifiers that help React identify which items in a list have changed, added, or removed. Keys are used to improve the performance of React applications by helping React to efficiently update the DOM.

Keys are passed to React elements as a prop. The key prop can be any valid string value, but it is recommended to use a string that uniquely identifies the element. For example, if you are rendering a list of users, you could use the user's ID as the key.

Here is an example of how to use keys in React:

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Carol" },
];

const userList = users.map((user) => <li key={user.id}>{user.name}</li>);

In this example, the key prop is set to the user's ID. This helps React to identify which users have changed, added, or removed when the list is updated.

Keys are especially important when rendering large lists. By using keys, React can efficiently update the DOM without having to re-render the entire list. This can lead to significant performance improvements.

Here are some tips for using keys in React:

• Use a unique string value for each key.
• Avoid using indexes as keys. Indexes can change when items are added or removed from a list.
• Use a stable identifier for each key. A stable identifier is an identifier that does not change over time. For example, a user's ID is a stable identifier, but a user's name is not.

Readings:

• Rendering Lists
• What are keys and its significance in Listing in React JS ?
• The Importance of Using the key Prop in a List of Elements in React.js

---

Handling Side Effects & Working with useEffect() Hook                        Home                        Behind the Scenes of React & Optimization Techniques