Hi,

I do not have a computer right now, but there has been changes in 4.0 related to toArray / toJson.

You might want to look at the 4.0 changelog (all RCs), especially this change :
https://github.com/immutable-js/immutable-js/blob/main/CHANGELOG.md#other-breaking-changes

The toJSON() method performs a shallow conversion (previously it was an alias for toJS(), which remains a deep conversion).

Or this one
https://github.com/immutable-js/immutable-js/blob/main/CHANGELOG.md#toarray

I remember migrating a lot to toArray when upgrading my codebase to 4.0 too.

Can you tell me if it did solve your issue?

Yeah switching to toArray did fix the problem but I am just trying to figure out what is different about toJS that causes the issue so I might be able to explain this to others.

In this case, deep conversion certainly isn't necessary and just a potential waste of performance, but it's a suprising outcome.
Seems as if the inner react components is being executed as a function

I agree that deep conversion isn't necessary but I'm just trying to understand what the cause of this behavior might be so that I might avoid similar pitfalls in the future. In the end if it turns out the answer is just to use what works (toArray) I can live with that.

I mean, if it is a bug then we would want to fix it. But I am not sure about that.

import * as Immutable from "immutable";
import "./styles.css";

const itemsData = Immutable.List([
  Immutable.Map([["name", "foo"]]),
  Immutable.Map([["name", "bar"]]),
]);
console.log("data", itemsData);

function Item({ itemData }) {
  console.log("react:", itemData);
  return <div>{itemData.name}</div>;
}

export default function App() {
  const data = itemsData
    .map((itemData) => {
      console.log("loopin", itemData);
      return <Item itemData={itemData.name} />;
    })
    .toJS();
  return <div className="App">{data}</div>;
}

When you put a console.log into Item, you can see that itemData is a plain object, but should be an Immutable.Map instead.
So when changing item.get("name") to itemData.name, we would expect undefined as output, but it actually works.

We can now see that during the mapping, the data is indeed a Map, but when the component function is being executed, the input is a plain old object. Also, turning around .map and .toJS solves the issue too (the Item component then receives an Immutable).

So I wonder who is doing that conversion on itemData? Is the react hooks magic playing tricks on us or does Immutable execute the component as a function during toJS? The later actually working would be kinda suprising, so maybe it's something about how this sample is built.

I would say its not simply react hook magic trickery since this example would work with Immutable 3.1.1 so I believe something has changed in Immutable 4 that causes this different behaviour.