What are lists and keys in React?

React is a JavaScript tool that is often used to build user interfaces. It uses lists and keys to make dynamic and efficient UIs. React's use of lists and keys allows for efficient rendering and reconciliation of dynamic data, resulting in improved performance and a smoother user interface. Keys help React identify and track individual list items, enabling more accurate updates and avoiding unnecessary re-rendering.

What are lists in React?

Lists in React are used to show a group of things at once. The map() method is used to make them. It gets an array of data and returns an array of React elements.

Example:

Explanation

• Line 1: The React module is imported from the 'react' package. It is required to define React components and use JSX syntax.

• Lines 3–6: This block of code defines a functional component called NumberList.

• Line 4: const numbers = props.numbers; extracts the numbers prop from the component's props. It assumes that the numbers prop will be an array of numbers.

• Line 5: const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>); uses the map() method to iterate over the numbers array. It creates an array of <li> elements, where each number in the array is displayed as an <li> item. The key prop is set to number.toString() to ensure each list item has a unique identifier.

• Line 6: The JSX expression <ul>{listItems}</ul> returns an unordered list (<ul>) containing the array of list items (listItems).

• Lines 9–17: This block of code defines another functional component called App.

• Line 10: const numbersArray = [1, 2, 3, 4, 5]; creates an array called numbersArray containing a list of numbers.

• Lines 12–15: The JSX expression within the return statement represents the structure of the rendered component.

  • <div> acts as a container to group the elements that will be rendered.

  • <h1>Number List</h1> displays a heading "Number List" on the page.

  • <NumberList numbers={numbersArray} /> renders the NumberList component, passing the numbersArray as a prop named numbers.

• Line 19: This line exports the App component as the default export. It allows other files in the React application to import and use the App component as needed.

How do lists work in React?

Let's look at some ways that lists can be used in React:

Using the map() method to make a list of objects

The map() method runs a function on each piece of an array to make a list of objects. This method in React takes a list of values and turns them into a list of components.

Example

Explanation

Line 1: In the first line, we import the React module, which allows us to define and work with React components.

Lines 5–10:

• Starting from line 5, we define the App functional component. It serves as the main component of our application.

• Within the App component, we create an array called books, which contains objects representing different books. Each book object has properties such as id, title, and author to store specific book details.

Lines 12–18:

• In the JSX code, we structure the content that will be rendered to the DOM.

• The <div> element acts as a container to group the elements together.

• We include an <h1> element with the text "List of Books" to serve as the heading for the book list.

• The <BookList> component is rendered, and we pass the books array as a prop named books.

Line 20: Finally, we export the App component as the default export, allowing other files to import and use as needed.

Rendering an array of objects

JavaScript's Array.map() and filter() methods can be used to turn arrays of objects into arrays of components, which are also known as lists. Lists often store information like user information received from a server.

Example

Explanation

Line 1: We import the React module, which is necessary to define and work with React components.

Lines 4–9:

• We define the App functional component, which serves as the main component of our application.

• Inside the App component, we create an array called items that holds objects representing different items.

• Each item object has properties such as id and name to store specific item details.

Lines 11–17:

• In the JSX code, we structure the content that will be rendered to the DOM.

• The <div> element acts as a container to group the elements together.

• We include an <h1> element with the text "Item List" to serve as the heading for the item list.

• The <ItemList> component is rendered, and we pass the items array as a prop named items.

Line 19: Finally, we export the App component as the default export, making it available for use in other files.

What are the keys in React?

Keys are special properties that are used to find things in a list. They help React figure out which items in a list have been added, removed, or changed, which speeds up DOM updates.

How to use the keys in React?

When using keys in React, it's essential to follow best practices, such as ensuring each key is unique, stays the same over time, and can't be used more than once. If you use keys correctly, it can help speed up and prevent problems with the state of the components.

Example

Explanation

• Line 1: The code begins with importing the React library, which is necessary to define and use React components.

• Line 3: The NumberList function is defined, which is a React functional component. It takes props as a parameter, representing the properties passed to the component.

• Line 4: The numbers prop is extracted from the props object using the destructuring assignment.

• Line 5: The map function is called on the numbers array. It iterates over each array element and returns a new array with transformed elements. The map function is passed an arrow function that takes number as a parameter. It creates a <li> element for each number in the array. The key attribute is set to the string value of number using the toString() method.

• Line 6: The resulting array of <li> elements is assigned to the listItems variable.

• Line 7: The NumberList component returns an <ul> element that wraps around the listItems variable. This will render the list of <li> elements as an unordered list.

• Line 10: The App function is defined, which is also a React functional component.

• Line 11: An array called numbers is created with the values [1, 2, 3, 4, 5]. This array will be passed as a prop to the NumberList component.

• Lines 14–17: The App component returns a <div> element that contains an <h1> element with the text "Number List" and the NumberList component. The numbers array is passed as a prop to the NumberList component using the numbers={numbers} syntax.

• Line 19: The App component is exported as the default export of the module. This allows other parts of the application to import and use the App component.

Why are React keys important?

Keys are vital for two things: performance and managing the state. React needs to track which items have been changed, added, or taken away when it displays a list of elements.

Without keys, every time React is updated, it would have to compare the whole list of parts, making rendering slow and inefficient. Keys make it easy for React to find the changed details and only update those. Keys also help handle the state of components by making it possible for React to find list elements and see if they have changed.

Best ways to use keys in React

Follow these best practices for using keys in React to get the most out of them:

• Each item in the list should have its key.

• The keys should stay the same over time.

• Keys should be steady, meaning they shouldn't change when the list's order changes.

• Keys should be added to the list's top-level elements, not child elements.

Explanation

In the wrong example, the keys are added to the child elements (<li>) instead of the top-level element (<ul>). This violates the best practice of adding keys to the top-level elements in the list. Whereas, in the right example, the key is added to the top-level element (<ul>) instead of the child elements (<li>). This follows the best practice of adding keys to the top-level elements in the list.

Conclusion

Lists and keys are necessary for making changeable user interfaces that work well in React. We can use lists and keys to create React components that are easy to manage, perform well, and grow. By following best practices for how to use keys, developers can avoid common mistakes and build high-quality React apps.