Key in React

React keys are a feature that allows developers to uniquely identify each item in a list or collection of elements. Keys are used by React to optimize rendering performance by minimizing the number of changes required to update the user interface.

In this article, we will explore what keys are, why they are important, and how to use them in your React applications.

What are keys in React?

Keys are special attributes that provide a unique identifier to each item in a list of React components. When rendering a list of components in React, the framework needs a way to identify which items have changed or been added, or removed.

Keys help React optimize the process of updating the UI by identifying which components are new, which have changed, and which have been removed. Without keys, React would have to rerender all components in the list on every update, which would negatively impact performance.

Why are React keys important?

Keys are important for several reasons:

1. Improved performance

Keys help React to identify which items in a list have changed. By using keys, React can avoid re-rendering components unnecessarily, which can improve the user experience.

2. Unique identification of elements

Keys provide a way to uniquely identify each item in a list, which can be important in some cases. For example, if you have a list of items that can be reordered or edited, keys can be used to keep track of which item is which.

3. Better handling of DOM elements

Keys can help with the management of DOM elements. When a new item is added to a list, React will create a new element in the DOM to represent that item. By using keys, React can determine if an element can be reused for the new item, which saves time.

How to use key in React?

In React, you can add keys to components using the key attribute. The key attribute is a special attribute that React uses to track which items in a list have changed or been added or removed.

Here is an example of how to use keys in a list of components:

function ListItem(props) {
  return <li key={props.id}>{props.text}</li>;
}

function MyList(props) {
  const listItems = props.items.map((item) =>
    <ListItem key={item.id} text={item.text} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

In this example, the ListItem component is passed an id prop which is used as the key attribute. The MyList component maps over the items prop, which is an array of objects with id and text properties. For each item in the array, a new ListItem component is created with a unique key.

Best practices for using React keys

When using keys in your React application, there are a few best practices to keep in mind:

1. Always use unique keys

Keys should always be unique within the scope of the list or collection of elements. Using non-unique keys can result in unexpected behavior, such as components being duplicated or not re-rendered when they should be.

2. Use stable keys

Keys should be stable and not change over time. Changing keys can cause components to be re-rendered unnecessarily, which can negatively impact performance.

3. Don’t use indexes as keys

While it may be tempting to use array indexes as keys, this is generally not a good idea. Array indexes can change if items are added or removed from the array, which can cause unexpected behavior.

React will use the key to determine which elements have changed, added, or removed from the list. When a key changes between renderings, React will consider it as a completely new element and will perform all of the necessary updates to the DOM.

Here’s an example of how to use keys with an array of components:

function TodoList(props) {
  const todos = props.todos;
  const listItems = todos.map((todo) =>
    <Todo key={todo.id} todo={todo} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

function Todo(props) {
  return <li>{props.todo.text}</li>;
}

const todos = [
  {id: 1, text: 'Learn React on DataFlair'},
  {id: 2, text: 'Complete all tutorials on DataFlair'},
  {id: 3, text: 'Launch a project to production'},
];

ReactDOM.render(
  <TodoList todos={todos} />,
  document.getElementById('root')
);

Output:

In this example, each Todo component is given a unique key based on the todo item’s id. When a new todo is added or an existing one is removed.

React will use the keys to determine which elements have changed and perform the appropriate updates.

Conclusion:

In summary, keys are an important concept in React and can greatly improve the performance of your application when used correctly. They allow React to efficiently update the DOM by identifying which elements have changed between renderings. This reduces the amount of work that needs to be done to update the UI.