Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way.

The Immer package exposes a produce function that does all the work. produce(baseState, recipe: (draftState) => void): nextState produce takes a base state, and a recipe that can be used to perform …

Deep updates in the state of React components can be greatly simplified as by using Immer. The following example shows how to use produce in combination with useState, and can be tried on …

To make sure Immer is as small as possible, features that are not required by every project has been made opt-in, and have to be enabled explicitly. This ensures that when bundling your application for …

Importing immer In most cases, the only thing you need to import from Immer is produce:

The Immer package ships with type definitions inside the package, which should be picked up by TypeScript and Flow out of the box and without further configuration.

Working with immutable data, before Immer, used to mean learning all the immutable update patterns. To help 'unlearning' those patterns here is an overview how you can leverage the built-in JavaScript …

Frequently Asked Questions Q: How does Immer work? Read the (second part of the) introduction blog. Q: Does Immer use structural sharing? So that my selectors can be memoized and such? A: Yes Q: …

By default, Immer uses loose iteration which only processes enumerable string properties. This is faster than strict iteration which includes symbols and non-enumerable properties.

Maps and Sets that are produced by Immer will be made artificially immutable. This means that they will throw an exception when trying mutative methods like set, clear etc. outside a producer.