use-immer

Use Immer's immutable update model as a drop-in replacement for useState and useReducer — write mutations, get immutable state.

use-immer

React

Use Immer's immutable update model as a drop-in replacement for useState and useReducer — write mutations, get immutable state.

npm GitHub Docs

Fit

Bundle (gzip)

326 B

570 B raw

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

Freshness

The Problem

Updating nested state immutably in React requires spreading at every level, which becomes unwieldy for deeply nested objects or arrays. useReducer helps but still forces verbose spread chains.

What It Does

useImmer works exactly like useState but lets you update state by directly mutating a draft object. Immer proxies the draft, tracks changes, and returns a new immutable state — so React sees the update correctly without any spreading.

Installation

bash

npm install immer use-immer

Usage Example

tsx

import { useImmer } from 'use-immer';

interface Profile {
  name: string;
  address: { city: string; zip: string };
}

export function ProfileEditor() {
  const [profile, updateProfile] = useImmer<Profile>({
    name: 'Alice',
    address: { city: 'Berlin', zip: '10115' },
  });

  return (
    <input
      value={profile.address.city}
      onChange={(e) =>
        updateProfile((draft) => {
          draft.address.city = e.target.value; // direct mutation!
        })
      }
    />
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.