Why am I not seeing updates in my destructured MobX property?

[teilarer]

Why is linkURL not updated when you click handleSetUrlWithDestructure first time? https://codesandbox.io/p/sandbox/intelligent-tom-vgckjd

class Store {
  linkURL: string = "";

  constructor() {
    makeAutoObservable(this);
  }

  async setUrl() {
    await new Promise((resolve) => setTimeout(resolve, 500));

    runInAction(() => {
      this.linkURL = "https://example.com";
    });
  }
}

export const store = new Store();

const SomeComponent: React.FC = observer(() => {
  const { linkURL } = store;

  const handleSetUrl = async () => {
    await store.setUrl();
    if (store.linkURL) {
      window.open(store.linkURL, "_blank");
    }
  };

  const handleSetUrlWithDestructure = async () => {
    await store.setUrl();
    if (linkURL) {
      window.open(linkURL, "_blank");
    }
  };

  return (
    <div>
      <button onClick={handleSetUrl}>Set & Open URL</button>
      <button onClick={handleSetUrlWithDestructure}>
        Set & Open URL (destructure)
      </button>
    </div>
  );
});

export default SomeComponent;

[codeBelt]

It looks like this issue is related to React's rendering behavior. You're storing linkURL in the handleSetUrlWithDestructure function, where you destructure it from the store with const { linkURL } = store; at the top of your component. However, the component hasn't re-rendered to reflect any updates to that value.

In contrast, in your handleSetUrl function, you're accessing linkURL directly from the store with store.linkURL. This ensures you're getting the updated value directly from the store, rather than from the component's current state.

This behavior is similar to how useState and useRef work. With useState, you need to wait for the component to re-render to get the updated value. But with useRef, you can access the value without triggering a re-render, as it doesn't cause the component to update.

[teilarer]

This must be it, thank you. So using destructured values from mobx store in React component's body is prone to bugs?

[codeBelt]

Yes, using destructured values from a MobX store directly in a React component's body is indeed prone to bugs and is generally considered an anti-pattern when working with MobX. This is because of how MobX's reactivity system works with React.

When you destructure a value from a MobX store at the component level:

const { linkURL } = store;

You're essentially creating a one-time snapshot of that value. The destructured value is no longer connected to MobX's reactivity system. It's just a plain JavaScript value with no "knowledge" of its original observable source.