What is the use of data-reactid attribute in HTML ?

The data-reactid attribute is a custom attribute that react can easily identify its components within the DOM. Just like the HTML “classes” and “id” attributes, “data-reactid” helps in uniquely identifying the element .

Since sharing the entire object references in a serialized order between the server and the client is potentially expensive. Hence, using these id’s react internally builds a representation of references of the nodes (used to build up your application) present in the DOM. When the app is rendered and the react is loaded at the client the only data it shares to the server is the “data-reactid” attributes.

Then the “data-reactid” attributes convert back into the data structure provided and displays the data without actually rendering the entire data structure at the client.

Example: Importing the data from the file Data.js using “react-id” attribute in the app.js).

Data.js

export const Data=[
{
 id: '.1',
 node: Div,
 children: [
   {
     id: '.2',
     node: Span,
     children: [
       {
         id: '.2’,
         node: Input,
         children: []
       }
    ]}
     ]
}];

App.js

import React, { Component } from 'react';
import {Data} from './src/data';
class App extends Component{
    render(){
        return(
            <div data-reactid='.1'>
                <span data-reactid='.2'>
                  <input data-reactid='.3' />
                </span>
            </div>
               );
        }
}

react-js-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.