React renders differently on server and client.

I have read #3152 and #3879 but this seemed like maybe another but related problem.

When the browser tries to bootstrap React and rerender the page I get this warning.

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) e6zyboqo.1.2.1.0.1">"This is a
 (server) e6zyboqo.1.2.1.0.1">"This is a test

Apart from the case that it is unnecessary to escape the quote it seems to render differently on the server and browser. This is just static content so I don’t really understand why?

The markup to render the element is like this.

<p><strong>Next:</strong>"This is a test"</p>

How come it’s rendered different?

[lalau]

Is this issue about mismtach caused by character encoding (@vlinder) or attribute ordering changed by object.assign (@mridgway)?

I am seeing a similar issue as @mridgway that in some cases the props key ordering is changed by object.assign and then by using the spread operator to specify them causes the server the client to render the attributes in different order.

Since the spec doesn’t specify the ordering the keys in an object, it seems pretty fragile that we take the attribute ordering into account when determining if there is a mismatch. The other way is to have the spread operator returns a consistent ordering, but not sure how you can do that except doing a sort on the keys, which is pretty costly.

[Download]

@mridgway

Our issue turned out to be an issue with the object-assign package switching to using getOwnPropertyNames which returns keys in the wrong order when the object’s key become too large.

Ah!! That sounds like a really good reason for me seeing this warning:

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) ut" id=“textfield-” value=“” type=“text” (server) ut" id=“textfield-” type=“text” value=“”

I have an isomorphic app so I can’t see a reason key ordering should be different… except for what you are saying here. Thanks!