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?: stackoverflow.com/questions/33521047/… — Mark Schultheiss
– Mark Schultheiss, Commented Jun 2, 2016 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
– Mark Schultheiss, Commented Jun 2, 2016 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
– TJR, Commented Jun 2, 2016 at 18:41
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." — Mark Schultheiss
– Mark Schultheiss, Commented Jun 2, 2016 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
– TJR, Commented Jun 2, 2016 at 20:51

neo post modern · Accepted Answer · 2016-08-05 13:43:42Z

1

+50

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.

edited Aug 5, 2016 at 13:43

neo post modern

3,4841 gold badge22 silver badges30 bronze badges

answered Jun 3, 2016 at 14:45

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS Markup warning when async on client

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related