Timo Rütten Timo Rütten - 3 months ago 91
React JSX Question

ReactJS Markup warning when async on client

We are currently developing in ReactJS. When we take a look into the console we see always this one warning by ReactJS:



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) autosuggest__input" data-reactid="9"></d
(server) autosuggest__input" placeholder="Value



The Problem is simple - we have an input field which will get a placeholder. On client side the content will be set reactive, so its async. On Server side the value will be setted synchron because async is not possible. The final value is the same. But because on client its async react is always dropping this error.

Is there a "correct" way to do it when we are using async values on client but synchron on server ?

On client its async / reactive because we are using MeteorJS to make it reactive.

Answer

Attempt to have it such that the client will modify the state of components initially rendered from the server rather than rendering its own components.

Sometimes this can be worked around by wrapping in a <div>.

I did a quick search on isomorphic in this area and found this: jeffhandley.github.io/QuickReactions/15-isomorphic-aim.html not sure it is 100% of your answer but it covers similar issue(s)

A search on the partial error might also help you: "React attempted to reuse markup in a container but the checksum was invalid."

This appears to be credible information regarding how to manage a component on a page.

Comments