What causes the observer to re-render a component?

[joaovct]

Have been playing around a little with the observer and found out to be interesting the way it avoids unnecessary re-renders. However, I want to know more about it. The docs says: "It also makes sure that components don't re-render when there are no relevant changes?". My question it's: what does "no relevant changes" really means?

[urugator]

Generally speaking if it wouldn't change the output it's not relevant, eg:

// Conditions
observer(({ store }) => {  
  return store.cond ? store.a : store.b
  // if `store.cond` is `true`, `store.b++` is NOT relevant
})

// Object props
observer(({ store }) => {
  return store.a;
  // `store.b++` is NOT relevant
  // `store.a++` IS relevant
})

// Passthrough
observer(({ store }) => {    
  return <User user={store.users[0]}/>
  // `store.users[0].name = "new name"` is NOT relevant for this component
  // it can be relevant for User component, so it may need to be observer
  // `store.users = [{ name: "foo" }]` IS relevant
  // `store.users[0] = { name: "foo" }` IS relevant
})

Note in all above cases, swapping store itself is relevant, but that's simply handled by React.memo.

The logic is simple: if value was accessed, it will affect the result, therefore is relevant (assumes there are no unused vars or meaningless expressions).
It's implemented by injecting subscription/notification logic into getters/setters or via proxy handlers + global state.

https://mobx.js.org/understanding-reactivity.html

[joaovct]

So, if we had a component like this:

const List = observer(({ list }) => {
  // don't have any other internal state
  console.log(list);

  return ...
  );
});

Can we correctly affirm that the console.log will only be prompted when list updates, besides whatever happens in the components above it?

[urugator]

Why don't you try?

whatever happens in the components above it

observer implicitly applies memo, so if list is the same reference (which is usually the case with mutable state), then shallow equality check yields true, skipping render...

[joaovct]

Try it before and notice this behavior. Just wanted to be 100% sure.