How do I iterate over an array in Mobx without triggering the "Derivation 'observer' is created/updated without reading any observable value." warning

Question

I'm using:

"mobx": "^6.6.2",
"mobx-react-lite": "^3.4.0",

And want to do a simple .map over an array of stores in my .tsx (.items is of type MenuStore[])

{menuBarStore.items.map((menuStore, index) => {
    return <Box key={index}>{menuStore.label}</Box>;
})}

But this gives the Mobx warning:

[mobx] Derivation 'observer' is created/updated without reading any observable value.

How do I get around this without disabling the warning?

Answer 1

All this warning means is that this code is running in an observer function (e.g., render of a react component that is an observer) and nothing referenced inside the function (in the code) is actually observable. Thus, the observer is kind of useless since it has nothing to observe.

If this is a UI component and you want it to re-render if the array of items changes, then make that array an observableArray, which would track changes to the array itself (though not changes to an existing individual item).

If the items themselves are also observable, then changing an item would trigger a re-render I think because of the fact that you map over all of the items and therefore each of them is referenced inside the observer function and therefore becomes observed.

Note that as far as I know making an array into an observableArray does involve iterating and copying the original array. Most of the time (like 99% of the time) this is unnoticeable in terms of performance, but if the array is very large or the items have a lot of properties, then it could become a performance issue if the array is recreated frequently.