useAsObservableSource double renderings about mobx-react-lite HOT 5 CLOSED

useAsObservableSource creates an observable object that is updated every render

const cmp = observer(props => {
  const source = useAsObservableSource({ name: props.name }); // source.name updated every render
  return <span>{source.name}</span> // subscribed for source.name, because it's observer
})

So if such component recieves new props, and props.name differs, it's rendered twice:
First time because the props changed.
Second time because source.name changed - the update is scheduled during first render, more specifically during the assigment of props.name to source.name.
Conceptually it's similar to: https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

However I don't understand how Observer is going to help here...

from mobx-react-lite.

If there are 3 properties on props, all of which have changed, will it be rendered 4 times?
@urugator

from mobx-react-lite.

Depends if you change those properties in action or not. React does have batching so the amount of rendering might be less, but it's generally better to be explicit and use an action to batch the change.

from mobx-react-lite.

@Luncher No. The assigment runs in action, which provides batching, so there will be a single setState call. However even without action, there would be 3 individual setState calls during the same render, so react would schedule a single update anyway.

from mobx-react-lite.

@urugator @FredyC thanks a lot

from mobx-react-lite.