Keys and Refs in React

3 min readFeb 26, 2018

This blogpost is going to cover two very basic React.js concepts that are often included in the interview questions: the significance of keys and refs. The names of these attributes speak for themselves: both keys and refs are used to identify particular elements in the DOM, however their purposes are different.

Keys

Keys React are utilised to identify specific Virtual DOM Elements that have changed. The classic example of usage of keys is a list. Let’s imagine we have an array of objects:

fruits = [{name: "Pineapple", id: 1}, {name: "Banana", id: 2}, {name: "Passion Fruit", id: 3}

If we were to pass this array as a prop to a FruitList component in order to render a list of fruits onto the page, we would iterate through our array of fruits, rendering each one as a list item:

const FruitList = (props) =>{
  const fruits = props.fruits.map((fruit) =>
    <li>{fruit.name}</li>
  )
  return(
    <ul>
      {fruits}
    </ul>
  )
}

This works and does indeed render the list of fruits. However at any moment we might want to add new fruits, as well as delete or modify the existing ones. How would React know to perform those changes efficiently? That’s where the key attribute comes in handy. There are usually several choices for creating element’s unique identity. One of them is using existing IDs of each object:

const FruitList = (props) =>{
  const fruits = props.fruits.map((fruit) =>
    <li key={fruit.id}>{fruit.name}</li>
  )
  return(
    <ul>
      {fruits}
    </ul>
  )
}

You might also find yourself in a situation when items in your array don’t really possess a unique ID. In case of no stable IDs for rendered items, index of iterator may be used as a key.

const FruitList = (props) =>{
  const fruits = props.fruits.map((fruit, index) =>
    <li key={index}>{fruit.name}</li>
  )
  return(
    <ul>
      {fruits}
    </ul>
  )
}

An important note for key usage is that they only have to be unique among their siblings. Keys don’t have to be globally unique, meaning that the same keys can be used for two different arrays.

Refs

Similarly to keys refs are added to elements in the form of attributes. According to React.js documentation some of the best cases for using refs are: managing focus, text selection, or media playback, triggering animations, and integrating with third-party DOM libraries.

Usually props are the way for parent components interact with their children. However in some cases you might need to modify a child without re-rendering it with new props. That’s exactly when refs attribute comes to use.

Both strings and callback functions used to be allowed as values passed into refs, however strings are now considered legacy, and will likely be deprecated at some point in the future. When passing a ref attribute to an HTML element, we pass that very DOM element as an argument to the callback function:

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusInput() {
    this.textInput.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusInput}
        />
      </div>
    );
  }
}

However tempting it might be to use refs for lots of things in your app, it is recommended to moderate its usage. An important thing to understand here is that refs manipulate actual DOM as opposed to virtual DOM which basically contradicts the main principle of how React works.

Keys and Refs in React

Written by Lucya Koroleva