Why does MobX behaviour change if observable is logged?

40 Views Asked by At

I have the following classes, simplified for readability:

const TimelineTable = observer(() => {

  const [timeline] = useState(() => getTimeline())

  console.log(timeline.pointsInTime.length)
  return (
    <DataTable
      records={timeline.pointsInTime}
      columns={...}
    />
  )
})

export default TimelineTable
export class Timeline {

  pointsInTime: PointInTime[] = []

  constructor() {
    makeAutoObservable(this)
  }

  addPointInTime = (pointInTimeToWrite: PointInTimeWriteOnly) => {
    PointInTimeAPI.post(pointInTimeToWrite)
      .then(
        action("postPointInTimeSuccess", pointInTime => {
          this.pointsInTime.push(pointInTime)
        }))
  }

  deletePointInTime = (id: number) => {
    PointInTimeAPI.delete(id)
      .then(
        action("deletePointInTimeSuccess", () => {
          const pointInTimeIndex = this.findPointInTimelineIndex(id)
          this.pointsInTime.splice(pointInTimeIndex, 1)
        }))
      )
  }
  ...

So far this was working as intended, with the table updating when I changed the pointsInTime-Array. But as I was cleaning up I noticed something strange: If I remove the log-output, the TimelineTable does not register changes to the array anymore.

Why would it make a difference if I log the observable state? And how would I have to change this setup so TimelineTable does update whenever pointsInTime changes?

0

There are 0 best solutions below