Skip to content
Use immer to drive state with a React hooks
Branch: master
Clone or download
mweststrate Merge pull request #28 from gnaeus/master
Fix useImmer TypeScript signature
Latest commit 159c1d9 Jul 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix useImmer TypeScript signature Jul 19, 2019
.gitignore Use microbundle Apr 15, 2019
CHANGELOG.md Updated changelog and released Jan 4, 2019
LICENSE Initial commit Oct 25, 2018
README.md Remove warning about React alpha Feb 15, 2019
package-lock.json Updated changelog and released Jan 4, 2019
package.json v0.3.1 May 13, 2019
yarn.lock Use microbundle Apr 15, 2019

README.md

use-immer

A hook to use immer as a React hook to manipulate state.

Installation

npm install use-immer

API

useImmer

useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and and the changes will be made immutable and become the next state.

Example: https://codesandbox.io/s/l97yrzw8ol

import React from "react";
import { useImmer } from "use-immer";


function App() {
  const [person, updatePerson] = useImmer({
    name: "Michel",
    age: 33
  });

  function updateName(name) {
    updatePerson(draft => {
      draft.name = name;
    });
  }

  function becomeOlder() {
    updatePerson(draft => {
      draft.age++;
    });
  }

  return (
    <div className="App">
      <h1>
        Hello {person.name} ({person.age})
      </h1>
      <input
        onChange={e => {
          updateName(e.target.value);
        }}
        value={person.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  );
}

(obviously, immer is a little overkill for this example)

useImmerReducer

Immer powered reducer, based on useReducer hook

Example: https://codesandbox.io/s/2zor1monvp

import React from "react";
import { useImmerReducer } from "use-immer";

const initialState = { count: 0 };

function reducer(draft, action) {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return void draft.count++;
    case "decrement":
      return void draft.count--;
  }
}

function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}
You can’t perform that action at this time.