Explicit method or implicit method is better in MobX?

[deadcoder0904]

I have a Background type:

export type Background = {
	transparent: boolean
	selectedColor:
		| { solidColor: SolidColor }
		| { linearGradient: LinearGradient }
		| { radialGradient: RadialGradient }
		| { pattern: Pattern }
	swatches: {
		solidColor: SolidColor[]
		linearGradient: LinearGradient[]
		radialGradient: RadialGradient[]
		pattern: Pattern[]
	}
}

I have an updateBackground function like:

updateBackground({ transparent, selectedColor, swatches }: Partial<Background>) {
	if (transparent !== undefined) this.background.transparent = transparent

	if (selectedColor) {
		if ('solidColor' in this.background.selectedColor && 'solidColor' in selectedColor)
			this.background.selectedColor.solidColor = selectedColor.solidColor
		if ('linearGradient' in this.background.selectedColor && 'linearGradient' in selectedColor)
			this.background.selectedColor.linearGradient = selectedColor.linearGradient
		if ('radialGradient' in this.background.selectedColor && 'radialGradient' in selectedColor)
			this.background.selectedColor.radialGradient = selectedColor.radialGradient
		if ('pattern' in this.background.selectedColor && 'pattern' in selectedColor)
			this.background.selectedColor.pattern = selectedColor.pattern
	}
	if (swatches) this.background.swatches = swatches
}

I just realised I can simplify the above function as:

updateBackground(newBackground: Partial<Background>) {
	this.background = {
		...this.background,
		...newBackground,
	}
}

Obviously, reading the 2nd function is much easier. What do you guys prefer? Any disadvantages of using the 2nd one? Or advantages of 1st one?

[urugator]

Generally you should perform the smallest possible mutation. That allows fine grained subscriptions - eg if you always replace whole background, then a component that depens only on background.transparent can't ever be invalidated individually (in case only transaprent field changed). Avoiding deep hierchies and normalizing state helps with this. It's an optimization and may not always worth the efford.
EDIT: you should also distinguish between value objects and objects with identity

I just realised I can simplify the above function as:

You can avoid the copy:
Object.assign(this.background, newBackground)