What is checksum in React and how to use it?

Question

I'm reading this example of React server-side rendering. It states:

Try viewing the page source to ensure the HTML being sent from the server is already rendered (with checksums to determine whether client-side rendering is necessary)

Ok, I saw page source and there is indeed a data-react-checksum attribute:

<div data-reactid=".157rq30hudc" data-react-checksum="556954499">

And when I check the element in a browser console, it also has the attribute:

Then I decided to checked my site that uses React server side rendering too. And I see strange thing. Page source has data-react-checksum attribute but the element is a console doesn't.

Page Source:

<div class="activityOptionBox" data-reactid=".1l6uko4wt8g" data-react-checksum="168103090">

Console:

What does it mean? What for checksum and how to read/use it?

Answer 1

The checksum is used internally by React on the client, when using server rendering via ReactDOM.renderToString, to determine if the output from the server matches the output from the client. If it does, React can transparently upgrade the existing DOM from the server into a client-side app very efficiently. If it doesn't match, it means that the state and props to render on the server were different from the state and props to render on the client, and React must do a more expensive operation to initialize the client-side app.

I checked an app of mine, and it seems that—in at least some versions of React—the checksum attribute is removed from the element once the client-side application boots, though it is visible in the source code of the page.

Since the checksum is an internal consistency mechanism, you don't need to worry about it unless React detects that your server checksum and client checksum don't match, in which case it'll tell you via a warning or error in the console.