What does the data-react attribute mean?

This data-reactid is a data- HTML attribute used by React to interact with the DOM. React creates a virtual DOM, a collection of arrays and objects that it handles internally to avoid changing the DOM if it is not needed.

Since most interaction with an application is a change of values and actions that do not need to be in the DOM, react leaves a "port", a pointer, for each element through that data-reactid . So, when it is time to change something in the DOM, the element has an attribute to be referenced.

I'm not sure if this is useful in debug, if React saves this data-reactid to look it up in the DOM or if it's just to mirror what goes on inside. I imagine for debug and show what goes on internally, and the virtual DOM have references to the object / element in question.

It belongs to the Framework React and is automatically added by the Framework itself, to identify some component, in order to perform some updating and / or manipulation of content.

This method, however, was used in earlier versions. As of version 15, according to the #, this attribute is no longer used, instead of data-reactid you may notice some other attributes like data-reactroot or even comments such as <!-- /react-text: 2 --> .