Produced DOM is bloated with react-text

[vladshcherbin]

In the demo, if we use even simple hey element, DOM gets bloated with react-text.

It it possible to avoid this?

[medfreeman]

Hi, it is a standard behavior of React v15. In previous versions React used to wrap text nodes in additional <span> elements instead. It is needed for React to have the ability to update 'individual pieces of text'.

More info here.

[wooorm]

That’s not bloat, as @medfreeman points out, it’s a feature to make updates more performant!

[vladshcherbin]

@medfreeman @wooorm yeah, but in this example createElement doesn't wrap text elements and the produced DOM is clean.

Example:

jsBin example link

Can remark-react work this way or am I missing something?

[wooorm]

Hmm, I have some ideas on this but I don’t know enough about React’s internals. Anyone with more experience with React that has opinions on this?

[quoeradem]

The jsBin that @VladShcherbin linked does not produce react-text because ES6 string interpolation is being used so that React.createElement is provided a single child element.

React.createElement wraps child elements in react-text when an array is passed into it's children arg (even if the array only contains 1 element). As far as I can tell, this behavior is only necessary when an element contains multiple children and has no positive impact on single-child elements.

Simply reducing the children array to a single value if it only contains a single element should avoid most of unnecessary react-text comments.

[MoOx]

Those things are here because React server side API is used (to generate html, no just DOM manipulation). This is not an issue but anyway, this will go await with React 16.

[wooorm]

From reading all the comments here (thanks all!) I’m going to close this as I don’t think it’s a bug.

Feel free to comment below or PR something if you don’t think so.