ReactJS Markup warning when async on client

Question

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.

This question has some suggestions, do they have a positive effect here?: http://stackoverflow.com/questions/33521047/warning-react-attempted-to-reuse-markup-in-a-container-but-the-checksum-was-inv — Mark Schultheiss, Jun 02 '16 at 17:17
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 — Mark Schultheiss, Jun 02 '16 at 18:16
@MarkSchultheiss so you mean that its incorrect o assign reactive data via props and instead of this the reactivity has to be in states only ? But what about assigning data from the database as properties of a component which are fetched async on client but sync on server ? Maybe I just don't get what you mean - maybe you can explain me ? — TJR, Jun 02 '16 at 18:41
I did a quick search on isomorphic in this area and found this: http://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." — Mark Schultheiss, Jun 02 '16 at 18:50
Thanks @MarkSchultheiss I've fixed my app code now so every "reactive" prop data will be converted to states and I am only working with these states inside my component when the data is reactive. Its working now fine - but its an ugly workaround. Maybe I will find a better solution soon. If you want to receive the bounty I think you have to write a "real" answer instead of the comment :) Thanks! — TJR, Jun 02 '16 at 20:51
I care less about the bounty than the solution, I did not have enough time to post a fully tested answer. Good to know you were able to make progress. — Mark Schultheiss, Jun 03 '16 at 14:42

score 1 · Accepted Answer · edited Aug 05 '16 at 13:43

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.

ReactJS Markup warning when async on client

1 Answers1