I have a hook that uses an observable which is a map - peripheralStore.connectedDevices
. this map consists with values which are also observables - Sensor
The hook updates when peripheralStore.connectedDevices
changes, but the values themself aren’t.
Funny thing about it is that once i log the entire map, the hook get re-renders with every changes in the the map's values
My Custom Hook:
export default function useSensor(): UseSensorObj {
const { peripheralStore } = useStore()
const devices = peripheralStore.connectedDevices
const isConnected: boolean = !_.isEmpty(devices)
const value = devices?.values().next()
//console.log(`log: ${JSON.stringify(devices)}`)
const batteryLevel = value?.value?.battery
return { devices, batteryLevel, isConnected }
}
here is how i updated the map:
class PeripheralStore implements IPeripheralStore {
constructor(...) {
makeAutoObservable(this, {}, { autoBind: true })
...
}
private async initSensor(sensor: ISensor) {
await runInAction(async () => {
sensor.init()
this.connectedDevices.set(sensor.peripheral.id, sensor)
})
}
...
}
and here is how i update the object's data:
class Sensor implements ISensor {
constructor(...) {
makeAutoObservable(this, {}, { autoBind: true })
...
}
this.monitorCharacteristic(...) => {
runInAction(() => {
const battery = decodeByteArrival[17]
if (this.battery !== battery) {
this.battery = battery
}
...
})
}
...
}
You probably need to reread this chapter of the docs https://mobx.js.org/understanding-reactivity.html#understanding-reactivity
When you do
JSON.stringify
it basically reads every property of your object/array or whatever, so this hook will rerender on any property change. And when you don't haveJSON.stringify
you only read top level property (array/object itself) so the hook only reacts to that property change, not inner ones.