How to Render Lists and Use Keys in React

Introduction

Rendering lists in React is a common task when you need to display a collection of data. Each element in the list requires a unique key to help React identify which items have changed, been added, or removed. This article will explain how to render lists and use keys effectively in React applications.

Rendering Lists

To render a list in React, you can use the JavaScript map function to iterate over an array and return a list of elements. Here is an example:

Example of Rendering a List

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

In this example, the NumberList component takes an array of numbers as a prop and returns an unordered list of list items.

Using Keys

Keys help React identify which items have changed, been added, or removed. They should be given to the elements inside the array to give the elements a stable identity.

Example of Using Keys

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>{number}</li>
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

In this example, the key is set to the number's string representation. Keys should be unique among siblings, but they don't need to be globally unique.

Extracting Components with Keys

Keys only make sense in the context of the surrounding array. If you extract a list item to a separate component, make sure to pass the key as a prop:

Example of Extracting Components with Keys

function ListItem(props) {
    return <li>{props.value}</li>;
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

In this example, the ListItem component is extracted from the NumberList component, and the key is passed to it as a prop.

Keys Must Only Be Unique Among Siblings

Keys used within arrays should be unique among their siblings. However, they do not need to be globally unique across different arrays.

Example of Unique Keys Among Siblings

function Blog(props) {
    const sidebar = (
        <ul>
            {props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )}
        </ul>
    );
    const content = props.posts.map((post) =>
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );
    return (
        <div>
            {sidebar}
            <hr />
            {content}
        </div>
    );
}

In this example, both the sidebar and the content use the same keys from props.posts but in different contexts (arrays), so the keys are unique among their siblings.

Fun Fact

Did you know? React's reconciliation algorithm, "diffing," heavily relies on keys to efficiently update the UI by identifying which items have changed, been added, or removed.

Conclusion

Rendering lists and using keys in React is essential for creating dynamic and efficient UIs. By understanding how to use the map function, keys, and unique identifiers, you can ensure that your React applications are performant and maintainable. Properly implementing keys helps React's reconciliation algorithm work effectively, providing a smooth and responsive user experience.