react: 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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (5 by maintainers)
@Swieckowski I think you’ll want to look at
setValueForProperty
inDOMPropertyOperations
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!
@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 😃