How to avoid unnecessary re-renders when an object observable gets updated but its value doesn't change?

[noaabarki]

Hello everyone,

I'm working with MobX 6.9.0 (mobx-react 7.6.0) and I've noticed that sometimes my components are re-rendering even when the value of my observable object hasn't changed. This seems to work well with primitive types, but not with objects.

For context, I'm polling data every X seconds and updating an observable with the new data using runInAction. A component is observing this observable using "observer" and displays the data.

As far as I understand, MobX only re-renders a component when (1) the component uses observer, (2) the observable is actually observed, and (3) the value of the observable has actually changed. However, I'm still experiencing re-renders even when the value hasn't changed.

Do any of you have any suggestions for how to avoid these unnecessary re-renders?

Thank you for your help!

[mweststrate]

MobX works with referential equality, not with structural equality (by default, as it is expensive). If you experience re-renders with seemingly the same objects, it is usually a sign you are accidentally creating new objects, which might not be the same as the previous. Since in JavaScript, {} !== {}, a typical mistake is to unnecessarily create new objects:

myObservable.coords = { x: 0, y: 17 }

// update y to `17` (which it already had)

// WRONG: structurally unchanged, but a new object, so MobX possibly detects myObservable.coords as changed
myObservable.coords = { ...myObservable.coords, y: 17 }

// CORRECT:
myObservable.coords.y = 17; 

Hope that helps, otherwise please make sure to provide a repro

[duoluodexiaoxiaoyuan]

MobX works with referential equality, not with structural equality (by default, as it is expensive). If you experience re-renders with seemingly the same objects, it is usually a sign you are accidentally creating new objects, which might not be the same as the previous. Since in JavaScript, {} !== {}, a typical mistake is to unnecessarily create new objects:MobX使用引用相等，而不是结构相等（默认情况下，因为它是昂贵的）。如果您遇到重新渲染看起来相同的对象，则通常表明您意外创建了新对象，这些对象可能与以前的对象不同。因为在JavaScript中， {} !== {} ，一个典型的错误是不必要地创建新对象：

myObservable.coords = { x: 0, y: 17 }

// update y to `17` (which it already had)

// WRONG: structurally unchanged, but a new object, so MobX possibly detects myObservable.coords as changed
myObservable.coords = { ...myObservable.coords, y: 17 }

// CORRECT:
myObservable.coords.y = 17; 

Hope that helps, otherwise please make sure to provide a repro希望有帮助，否则请务必提供一个repro

hello, I want ask some question.

For examble
App.jsx

const App = observer(() => {
  return (
    <div className="App">
      <div>你好世界111</div>
      <TimerView/>
    </div>
  );
})

TimerView.jsx

const TimerView = observer(() => {
  const timer = useTimerStore();
  return <div>
    <span>Seconds passed: {timer.secondsPassed}</span>
    <button onClick={
      () => {
        console.log('点击了',timer.secondsPassed)
        timer.increaseTimer()
      }
    }>点击</button>
  </div>
});

I found a question, I must use observer in TimerView, Although my parent component use observer.

[mweststrate]

I found a question, I must use observer in TimerView, Although my parent

component use observer. Yes. Please consult the documentation if you're further interested in why, it is covered quite extensively

…

On Sat, 16 Sept 2023, 04:55 duoluodexiaoxiaoyuan, ***@***.***> wrote: MobX works with referential equality, not with structural equality (by default, as it is expensive). If you experience re-renders with seemingly the same objects, it is usually a sign you are accidentally creating new objects, which might not be the same as the previous. Since in JavaScript, {} !== {}, a typical mistake is to unnecessarily create new objects:MobX使用引用相等，而不是结构相等（默认情况下，因为它是昂贵的）。如果您遇到重新渲染看起来相同的对象，则通常表明您意外创建了新对象，这些对象可能与以前的对象不同。因为在JavaScript中， {} !== {} ，一个典型的错误是不必要地创建新对象： myObservable.coords = { x: 0, y: 17 } // update y to `17` (which it already had) // WRONG: structurally unchanged, but a new object, so MobX possibly detects myObservable.coords as changedmyObservable.coords = { ...myObservable.coords, y: 17 } // CORRECT:myObservable.coords.y = 17; Hope that helps, otherwise please make sure to provide a repro希望有帮助，否则请务必提供一个repro hello, I want ask some question. For examble App.jsx const App = observer(() => { return ( <div className="App"> <div>你好世界111</div> <TimerView/> </div> );}) TimerView.jsx const TimerView = observer(() => { const timer = useTimerStore(); return <div> <span>Seconds passed: {timer.secondsPassed}</span> <button onClick={ () => { console.log('点击了',timer.secondsPassed) timer.increaseTimer() } }>点击</button> </div>}); I found a question, I must use observer in TimerView, Although my parent component use observer. — Reply to this email directly, view it on GitHub <#3689 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBBWMUBFKPN7YZBEVPDX2UIKDANCNFSM6AAAAAAXSBG7YA> . You are receiving this because you commented.Message ID: ***@***.***>