What does the data-reactid attribute mean?

Question

I was looking at some websites, and I saw, in the source code of some pages, an attribute called data-reactid, embedded in elements div.

What is this attribute, what is its function and what influences?

Answer 1

That one data-reactid is an attribute data- HTML used by React to interact with the DOM. React creates a virtual DOM, a collection of arrays and objects that it manipulates internally to avoid changing the DOM if you don’t need to.

Since most interaction with an application is exchanges of values and actions that do not need to be in the DOM, the React leaves "a port", a pointer, for each element through this data-reactid. So when it’s 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 keeps this data-reactid to look for him in the DOM or if he’s just to mirror what’s going on inside. I imagine that to debug and show what is happening internally, and the virtual DOM have references to the object/element in question.

Answer 2

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 previous versions. From version 15, according to the own react documentation, this attribute is no longer used, instead of data-reactid you may notice some other attributes such as data-reactroot or even comments, such as <!-- /react-text: 2 -->.