Introduction to the data-reactid Attribute in HTML

HTML allows custom data attributes, and one such attribute is data-reactid, which helps you uniquely identify components within the DOM tree in your React app.

Nov 16, 2020 • 4 Minute Read

Subscribe to the newsletter

Introduction

HTML attributes like class and id are used for identifying elements differently. While classes are used to identify similar HTML elements together for the purpose of styling them, the id attribute is used to uniquely identify an element. HTML also allows custom data attributes, and one such attribute is data-reactid, which helps you uniquely identify components within the DOM tree in your React app. In this guide, you'll learn what the data-reactid attribute is and where and how it is used.

Data Attributes in HTML

Custom data attributes in HTML allow you to store and access data instantly in your markup that might be private to your app. They are is prefixed by the keyword data- and you can have any type of string as a value. For instance, consider the following markup:

      <li data-cost="$10" data-available="true">Burgers</li>

In the above li, you store some useful data in your app's JavaScript that you can use instantly without making a request to the server. So when a user comes to your food delivery app and clicks on the burger, you can immediately notify them of the availability of the item, its cost, etc.

Similarly, the data-reactid attribute also stores some information about your DOM tree that can be used to identify components residing in the tree uniquely.

Use Cases and Examples

React apps can be rendered both client-side and server-side. However, sharing component references within a tree is not possible without sending an entire serialized version of it, which in itself is an expensive task. Hence, this attribute's value is used for internally building up a representation of the nodes in the DOM tree that together constitute your app.

For instance, consider the following simplified version of your DOM tree:

      {
 id: '.W3GegB3Bzq',
  node: DivRef,
  children: [
    {
      id: '.tZtxhNj2eY',
      node: SpanRef,
      children: [
        {
          id: '.hgwiVqqeZJ',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}
    

Now, when your React app gets rendered on the server, it uses the unique data-reactid attribute to convert it to its original data structure, as shown above.

      <div data-reactid='.W3GegB3Bzq'>
  <span data-reactid='.tZtxhNj2eY'>
    <input data-reactid='.hgwiVqqeZJ' />
  </span>
</div>
    

This is an example of a server-side rendered app where ids are generally of the form of a random string that can uniquely identify an element. The only criteria is that the string should not be repeated so that collisions between different ids pertaining to different elements can be avoided. This is helpful when you want to use more than one server to render your React app.

Client-side rendered React apps use a specific integer format for id since you probably won't need more than one rendering process. Have a look at the example below.

      {
 id: '.121,
  node: DivRef,
  children: [
    {
      id: '.123',
      node: SpanRef,
      children: [
        {
          id: '.125',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}
    

Conclusion

To render a server-side React app, the data-reactid attribute can be extremely useful for sharing DOM object references between the client and server. In the latest versions after React 15, client-side rendered apps don't require this attribute anymore as it uses document.createElement for faster delivery of lightweight DOM. You can read more about this changelog here.

If you have any questions, feel free to ask at Codealphabet.