Mobx / React update issue

Question

I'm just learning Mobx and I'm trying to get this component to update with no luck. It seems like it should update, it just doesn't. What am I missing?

'use strict';

const observer = mobxReact.observer;
const makeAutoObservable = mobx.makeAutoObservable;
const isObservable = mobx.isObservable;
const isObservableProp = mobx.isObservableProp;
const configure = mobx.configure;

configure({
  // This gives you good warnings to read in the console
  // enforceActions: "always",
  computedRequiresReaction: true,
  reactionRequiresObservable: true,
  observableRequiresReaction: true,
  disableErrorBoundaries: true
});

const HeadingBug = observer(function ({heading}) {
  return React.createElement("span", null, "This is the heading bug. Current value: ", heading);
});

let heading = makeAutoObservable({
  value: 100
});

ReactDOM.render(React.createElement(HeadingBug, {
  heading: heading.value
}), document.getElementById('root'));

setTimeout(() => {
  console.log(`isObservable: ${isObservable(heading)}`);
  console.log(`isObservableProp: ${isObservableProp(heading, 'value')}`);
  console.log('Changing Heading to 200');
  heading.value = 200;
}, 2000);

Codepen: https://codepen.io/mtwomey/pen/qBNLwXz

Answer 1

You are dereferencing heading.value too early here:

ReactDOM.render(React.createElement(HeadingBug, {
  heading: heading.value
}), document.getElementById('root'));

You basically passing primitive number value inside your observer component, not observable value.

To fix it just pass whole heading object as a prop and use value inside heading component, like so:

const HeadingBug = observer(function ({heading}) {
  return React.createElement("span", null, "This is the heading bug. Current value: ", heading.value);
});

More info here: https://mobx.js.org/understanding-reactivity.html