Warn if stringifying an attribute takes too long

With React 16 we don’t have an attribute whitelist so both src={obj} and myattribute={obj} would be valid. The objects get stringified and added as attributes for smooth migration path because a lot of the existing code already depends on this behavior.

There is, however, one pitfall here. Sometimes you made do <div {...rest}> and not realize that rest includes an object whose stringifying is unusually expensive. For example a deeply nested Immutable Map. Now, this wouldn’t produce an error, but it would slow down rendering for no good reason.

We could protect against this by putting performance.now() counters around the places where we stringify attributes. If stringification takes more than, say, 2 milliseconds, then something bad is going on, and we should probably warn.

[aweary]

@Swieckowski I think you’ll want to look at setValueForProperty in DOMPropertyOperations

https://github.com/facebook/react/blob/fb85cf2e9c52a4b2999144a89a6ee8256aec55c7/packages/react-dom/src/client/DOMPropertyOperations.js#L164-L166

https://github.com/facebook/react/blob/fb85cf2e9c52a4b2999144a89a6ee8256aec55c7/packages/react-dom/src/client/DOMPropertyOperations.js#L136

Those two lines are where known attribute and unknown attribute values get stringified, respectively. I’m not sure if @gaearon intends to only warn for attributes that we don’t recognize, but this should be a good place to start.

Keep in mind that this warning and timing logic should only happen in the DEV bundle. This is handled by wrapping code in __DEV__ checks, which you can see examples of in the file linked above.

Hope that helps!

[aweary]

@wuweiweiwu it stalled because we didn’t provide any feedback. I just requested some changes, so let’s give @Swieckowski some time to address those requests before handing it off 😃