Solidjs: When using Map in createStore, it is not updated on change.

Question

I'm relatively new to Solidjs, maybe I'm overlooking something, but I try to understand the problem here given the following example:

const [state, setState] = createStore({ items: new Map() }); // e.g. Map<number, string>

In a component, let's say I want to use stored derived state, like this:

export const Overview = () => {
    const count = () => state.items.size;

    return (<div>{count()</div>);
};

If I now add a new entry to the map, I would have thought that the count property would update automatically because of the dependencies I used.

I tried replacing the map in this example with an array and it worked perfectly, the component displayed the correct and expected values.

Can someone direct me to the correct part in the documentation, or explain why arrays work but maps don't?

Answer 1

When the value of a signal changes, it notifies its subscribers, but instead of setting a new value, you insert a new entry into it, so this operation is not considered an update. You should set up a new map. You can move inserted values ​​into a new map by cloning the old map.