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.