explaingit

immerjs/use-immer

★ 4,516TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

TLDR

use-immer connects the Immer library to React hooks, letting you update component state by writing simple, direct-looking code instead of manually copying objects. It wraps useState and useReducer with Immer's draft-based approach, so React's immutability rules are handled automatically behind the scenes.

Mindmap

mindmap
  root((use-immer))
    What It Does
      Wraps React hooks
      Simplifies state updates
      Auto handles immutability
    Main Tools
      useImmer hook
      useImmerReducer hook
    How It Works
      Draft copy of state
      Immer converts mutations
      No spread operators needed
    Installation
      npm add immer
      npm add use-immer
    Limitations
      Local state only
      No global state
      No server data
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Updating nested objects or arrays in React component state without writing complex copy logic

USE CASE 2

Managing form state where multiple fields need to update independently and cleanly

USE CASE 3

Using a reducer pattern for state with multiple action types without writing spread operators

USE CASE 4

Simplifying any React component where state updates feel repetitive or error-prone

Tech stack

TypeScriptReactImmernpm

Getting it running

Difficulty · easy Time to first run · 5min

Install both packages: npm install immer use-immer. No configuration needed. Drop useImmer in place of useState and you are ready to go.

No license information was mentioned in the explanation.

In plain English

use-immer is a small library that connects the immer library to React's built-in state management system. To understand what it does, a little background helps. React is a popular JavaScript framework for building user interfaces, and it manages data through something called state. A rule in React is that you should never directly modify state data, instead, you create a new copy of the data with your changes applied. Immer is a library that makes this feel simpler: you write code that looks like you are directly changing the data, and immer automatically produces the correct new copy behind the scenes. use-immer brings that pattern into React hooks, which are the standard way React components manage state today. The library provides two main tools. The first is useImmer, which works almost identically to React's built-in useState hook. You call it with a starting value, and it gives back the current state and an update function. The difference is that the update function accepts an immer producer: a function where you can freely modify a draft copy of the state, and immer converts those mutations into an immutable update. If you pass a plain value instead of a function, it behaves exactly like useState. The second tool is useImmerReducer, which mirrors React's useReducer hook. Reducers are a pattern for managing more complex state changes through named actions (like increment, decrement, or reset). With useImmerReducer, your reducer function receives a mutable draft of the state rather than requiring you to write spread operators and object copies manually. The README is short and focused on code examples rather than prose explanations. Installation requires adding both immer and use-immer as npm packages. The library is tiny in scope: it does not manage side effects, server data, or global state across components. It is specifically a quality-of-life layer for the common task of updating local component state.

Copy-paste prompts

Prompt 1
I'm using use-immer in a React project. Show me how to replace a useState hook with useImmer to update a nested object like a user profile with name, email, and address fields.
Prompt 2
Using useImmerReducer, write a counter component that supports increment, decrement, and reset actions without any manual object spreading.
Prompt 3
I have a React component managing a list of to-do items. Rewrite the state update logic using useImmer so I can add, remove, and toggle items cleanly.
Prompt 4
Explain when I should use useImmer instead of useState, and when plain useState is still the better choice.
Prompt 5
Show me how to pass a plain value (not a function) to the useImmer setter to do a full state replacement, similar to how useState works.
Open on GitHub → Explain another repo

← immerjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.