There is a common issue during development when the markup generated on the server differs from what React should render on the client. As an example, consider the following React
component:
import React from 'react'; functionCurrentTime() { return<p>Current time (timestamp in ms): {Date.now()}</p>; } export default CurrentTime;
If you put this component on your React web page and reload the page in a browser, you should see a warning in the browser's console similar to this one:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) 1.0.1.0.1">1450010451418</span></p><...