| CARVIEW |
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
Reactmodule 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 thenumbersprop from the component's props. It assumes that thenumbersprop will be an array of numbers.Line 5:
const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);uses themap()method to iterate over thenumbersarray. It creates an array of<li>elements, where each number in the array is displayed as an<li>item. Thekeyprop is set tonumber.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 callednumbersArraycontaining 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 theNumberListcomponent, passing thenumbersArrayas a prop namednumbers.
Line 19: This line exports the
Appcomponent as the default export. It allows other files in the React application to import and use theAppcomponent 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
Appfunctional component. It serves as the main component of our application.Within the
Appcomponent, we create an array calledbooks, which contains objects representing different books. Each book object has properties such asid,title, andauthorto 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 thebooksarray as a prop namedbooks.
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
Appfunctional component, which serves as the main component of our application.Inside the
Appcomponent, we create an array calleditemsthat holds objects representing different items.Each item object has properties such as
idandnameto 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 theitemsarray as a prop nameditems.
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
NumberListfunction is defined, which is a React functional component. It takespropsas a parameter, representing the properties passed to the component.Line 4: The
numbersprop is extracted from thepropsobject using the destructuring assignment.Line 5: The
mapfunction is called on thenumbersarray. It iterates over each array element and returns a new array with transformed elements. Themapfunction is passed an arrow function that takesnumberas a parameter. It creates a<li>element for eachnumberin the array. Thekeyattribute is set to the string value ofnumberusing thetoString()method.Line 6: The resulting array of
<li>elements is assigned to thelistItemsvariable.Line 7: The
NumberListcomponent returns an<ul>element that wraps around thelistItemsvariable. This will render the list of<li>elements as an unordered list.Line 10: The
Appfunction is defined, which is also a React functional component.Line 11: An array called
numbersis created with the values [1, 2, 3, 4, 5]. This array will be passed as a prop to theNumberListcomponent.Lines 14–17: The
Appcomponent returns a<div>element that contains an<h1>element with the text "Number List" and theNumberListcomponent. Thenumbersarray is passed as a prop to theNumberListcomponent using thenumbers={numbers}syntax.Line 19: The
Appcomponent is exported as the default export of the module. This allows other parts of the application to import and use theAppcomponent.
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.
Relevant Answers
Explore Courses
Free Resources