Mobx / React update issue - mobx

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