use-immer

What is use-immer?

The use-immer package is a React hook that allows you to work with immutable state in a more convenient way. It leverages the immer library to provide a simple API for updating state without directly mutating it, making state management more predictable and easier to reason about.

What are use-immer's main functionalities?

Basic State Update

This feature allows you to update the state immutably. The `updateState` function takes a callback with a draft state that you can modify directly. The changes are then applied immutably to the original state.

const [state, updateState] = useImmer({ count: 0 });

const increment = () => {
  updateState(draft => {
    draft.count += 1;
  });
};

Nested State Update

This feature allows you to update nested state properties immutably. You can directly modify nested properties within the draft state, and immer will handle the immutability for you.

const [state, updateState] = useImmer({ user: { name: 'John', address: { city: 'New York' } } });

const updateCity = () => {
  updateState(draft => {
    draft.user.address.city = 'Los Angeles';
  });
};

Array State Update

This feature allows you to update array state immutably. You can use array methods like `push` directly on the draft state, and immer will ensure the original array remains unchanged.

const [state, updateState] = useImmer([1, 2, 3]);

const addItem = () => {
  updateState(draft => {
    draft.push(4);
  });
};

Other packages similar to use-immer

redux

Redux is a popular state management library for JavaScript applications. It provides a predictable state container and encourages the use of immutable state updates through reducers. Unlike use-immer, Redux requires more boilerplate code and is often used in larger applications.

mobx

MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming. Unlike use-immer, MobX uses observables and reactions to manage state, which can be more intuitive for some developers but also introduces a different paradigm.

zustand

Zustand is a small, fast, and scalable state management solution for React. It provides a simple API for managing state with hooks. Unlike use-immer, Zustand focuses on simplicity and performance, and it does not enforce immutability by default.

README

use-immer

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

Installation

npm install immer 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 or a value as argument.

Managing state with immer producer function

When passing a function to the updater, the draft argument can be mutated freely, until the producer ends 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)

Managing state as simple useState hook

When passing a value to the updater instead of a function, useImmer hook behaves the same as useState hook and updates the state with that value.

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

function BirthDayCelebrator(){
  const [age, setAge] = useImmer(20);

  function birthDay(event){
    setAge(age + 1);
    alert(`Happy birthday #${age} Anon! hope you good`);
  }

  return(
    <div>
      <button onClick={birthDay}>It is my birthday</button>
    </div>
  );
}

Obviously if you have to deal with immutability it is better option passing a function to the updater instead of a direct value.

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>
    </>
  );
}