Auto freezing

<div>
	<iframe
		width="760"
		height="427"
		scrolling="no"
		src="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer/embed"
	></iframe>
</div>
<a
	className="egghead-link"
	href="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer"
>
	Hosted on egghead.io
</a>

Immer automatically freezes any state trees that are modified using produce. This protects against accidental modifications of the state tree outside of a producer. In most cases this provides the most optimal behavior, but setAutoFreeze(true / false) can be used to explicitly turn this feature on or off.

Immer will never freeze (the contents of) non-enumerable, non-own or symbolic properties, unless their content was drafted.

⚠️ Immer freezes everything recursively, for large data objects that won't be changed in the future this might be over-kill, in that case it can be more efficient to shallowly pre-freeze data using the freeze utility.⚠️

⚠️ If auto freezing is enabled, recipes are not entirely side-effect free: Any plain object or array that ends up in the produced result, will be frozen, even when these objects were not frozen before the start of the producer! ⚠️