Immutable-js: Map/List.constructor vs merge vs. set and ReactElements

[sterpe]

I'm a bit unclear about the expected behavior with Map/List.merge when the values are ReactElements (or nested non-function Objects in general).

var div = React.createElement('div', null);
var span = React.createElement('span', null);
var map = Immutable.Map({ reactElement: div });

map = map.set("reactElement", span);

React.render(map.get("reactElement"), document.body);

The above works fine...but if we use merge:

var div = React.createElement('div', null);
var span = React.createElement('span', null);
var map = Immutable.Map({ reactElement: div });

map = map.merge({ reactElement: span });

React.render(map.get("reactElement"), document.body);
//(Throws an error...this isn't a proper reactElement anymore);

So it seems like the Map.constructor assigns the key 'reactElement' to the object reference, and set update the existing reference a new one, but merge is (I assume) recursively serializing the updated key-values with fromJS? Is this expected, or is there no way to say merge shallow object references?

[sterpe]

Nevermind I see that the problem is because I should be doing:

map = map.merge(Immutable.Map({ reactElement: span }));

[leebyron]

This actually seems like a real issue to me, so I'm going to re-open. merge should be a shallow operation, mergeDeep needs to be used explicitly to do deeper merges.

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[leebyron]

Merging this into #1293 which specifically highlighted the remaining issue