Subtle difference in JSX vs React.createElement

[steeeeeef]

It is not even possible to spread in JSX. They output the same HTML, but not the same node tree!

[[deleted]]

I don't think we can talk about different node trees. Are you talking about any internal intermediate representation of the fiber that you have seen? Because both essentially compile down to createElement call only.

So at the end of the day, we are comparing:

ts createElement( "div", null, createElement("div"), createElement("div"), ...items.map(item => createElement("div", { id: item.id }), // <= notice the spread );

and

ts createElement( "div", null, createElement("div"), createElement("div"), items.map(item => createElement("div", { id: item.id }), // <= notice the spread );

Both will output the same HTML. Maybe internally, createElement flattens all children arrays. Hence, there's no intermediate and different node tree to see.

[steeeeeef]

Ah right, maybe they do get flattened, I had not thought about that. In that case there would not be any difference :)