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

score 0 · Accepted Answer · answered Nov 13 '20 at 09:50

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

That works *facepalm*. Thanks - I could have sworn I tried that and got some react error about not being able to pass objects into ReactDOM.render(). However, I no longer see that error, so I must have just been doing something wrong. — MPT, Nov 13 '20 at 19:09

Mobx / React update issue

1 Answers1