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.

What is data-reactid?

The data-reactid is an attribute that is used as a unique identifier to track the DOM elements in the React DOM.

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

Note: The use of data-reacrtid is deprecated in the modern 

Uses to data-reactid

This attribute in HTML was used in the older versions of react.

• Identify and Track Components: It allowed React to track which components in the virtual DOM were linked to specific elements in the actual DOM. This made it easier for React to keep track of each element during the rendering process.
• Efficient DOM Updates: By using data-reactid, React could quickly pinpoint which elements had changed, so it only updated those specific parts of the DOM. This made updates faster and more efficient compared to reloading or re-rendering the entire page.
• Debugging and Testing: The data-reactid attribute also made debugging simpler for developers. When inspecting the HTML, you could see exactly which element in the DOM corresponded to which React component, thanks to the unique IDs added by React. This provided clearer insights when something didn’t work as expected.

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

// Filename - Data.js

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

// Filename - 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>
		);
	}
}