immer

Create the next immutable state by mutating a temporary draft of the current one.

immer

General JS

Create the next immutable state by mutating a temporary draft of the current one.

npm GitHub Docs

Fit

Bundle (gzip)

6.5 kB

18.1 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Updating nested immutable state with spread operators ({ ...state, a: { ...state.a, b: ... } }) is verbose, easy to get wrong, and obscures intent — yet mutating state directly breaks change detection in React and Redux.

What It Does

immer lets you write straightforward "mutating" code against a draft and produces a correctly structured-shared immutable result. It powers Redux Toolkit's reducers and integrates cleanly with React state.

Installation

bash

npm install immer

Usage Example

import { produce } from "immer";

const state = { user: { name: "Ada", tags: ["admin"] } };

const next = produce(state, (draft) => {
  draft.user.tags.push("editor");
  draft.user.name = "Ada Lovelace";
});

console.log(state.user.tags);  // ["admin"] (unchanged)
console.log(next.user.tags);   // ["admin", "editor"]

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.