Mobx: Best practice for passing props

[Raathigesh]

I have a domain model as follows

class Item {
  @observable name: string;
  @observable quantity: number;

  @action
  public setName = (value: string) => {
    this.name = value;
  }

  @action
  public setQuantity = (value: number) => {
    this.quantity= value;
  }
}

And there is an ItemComponent which is going to display the data in the model.

import ItemComponent from './ItemComponent';
const item  = new Item();

I can see two ways to pass the data from the model to the component as follows.

<ItemComponent 
   name={item.name}
   quantity={item.quantity}
   onNameChange={item.setName }
   onQuantityChange={item.setQuantity }
/>

or

<ItemComponent 
   item={item}
/>

What would you recommend and why?

[leader22]

https://mobxjs.github.io/mobx/best/react-performance.html

dereference-values-lately section will help you. 🍵

[mweststrate]

Indeed, always try to pass in objects. It makes the ItemComponent itself responsible for tracking, instead of the parent component, which is more expensive to re-render.