Differences between useObserver and <Observer> components

[seivan]

Why is the body of a defined component triggered after an update to person.name when using useObserver but not <Observer>?

useObserver this will log Outside useObserver everytime person.name is set, doesn't have to be different. Setting the same value will trigger the console.log in the body.

const WhenUsingUseObserver = ({ person }) => {
  console.log("Outside useObserver");

  return useObserver(() => {
    return <h1>{person.name}</h1>;
  });
}

<Observer> this will only log Outside <Observer> a single time, and never again even if person.name changes.

const WhenUsingObserver = ({ person }) => {
  console.log("Outside <Observer>");

 return <Observer>{() => <h1>{person.name}</h1>}</Observer>

}

Why do they behave differently, and when approach is preferred?

My theory is that the body is triggered when reconciliation runs, which is why it's run every time person.name is set, and not necessarily changed.

This is hidden from me since it might just run for the <Observer> component, but not my wrapping component since it's not an actual observer.

While useObservable hook makes my component an actual observer, thus its body will be triggered for each change.

But I'm not 100% sure if it's accurate or just a bug?

You can try this in the sandbox but I also changed mobx-react and mobx to the latest versions.

[seivan]

Explained in https://github.com/mobxjs/mobx-react/issues/848#issuecomment-604925431

Thank you @mweststrate

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.