Use React's useState and useReducer without Worrying about Immutability

Struggling with immutability? Finding a lot of spread operators in your codebase? This guide is for you!

TL;DR: Check out the https://github.com/immerjs/use-immer library, it's awesome!

---

Let's start with this component which allows us to change the user's bio:

import React, { useState } from "react";

function UserCardEditor() {
  const [state, setState] = useState({
    id: 14,
    email: "[e-mail]",
    profile: {
      name: "Horus",
      bio: "Lorem ipsum dolor sit amet..."
    }
  });

  function changeBio() {
    const newBio = prompt("New bio", state.profile.bio);

    setState(current => ({
      ...current,
      profile: {
        ...current.profile,
        bio: newBio
      }
    }));
  }

  return (
    <div>
      Name: {state.profile.name}
      <p>{state.profile.bio}</p>
      <button onClick={changeBio}>Change Bio</button>
    </div>
  );
}

export default UserCardEditor;

A few things to care about:

1. We're saving all the state inside the useState hook. To update it we need to call setState.
2. The only thing we're trying to modify here is the user's bio. Notice how it's nested inside the profile object.
3. React expects you to replace the state with a new one, to do that you must create a new object and pass it to the setState function!

Knowing that, it's simple to understand the reason behind doing this to update the state, right?

...

setState(current => ({
  ...current,
  profile: {
     ...current.profile,
     bio: newBio
  }
}));

...

I don't blame you if you don't think it's simple, because it's not. All these lines of code can be represented with this if you're using mutation:

setState(current => { 
  current.profile.bio = newBio;
});

You see? A single line instead of cloning the object using the spread operator multiple times. That's simple!

And... illegal. React expects you to return something from that function, maybe we can just return the same object?

setState(current => { 
  current.profile.bio = newBio;
  return current;
});

Yay! But... the view didn't update! Why? Well... remember that React expects you to use a NEW object, and that's not a new object, it's still the old one, you simply mutated one of it's properties.

Then... should we just stick to the long and noisy way that uses the spread operator?

You could, but... Someone already solved this problem!

immer and use-immer

Ever heard of immer? You may have heard of this library if you've been playing with Redux! If you didn't, let's take a look into how we can use Immer with React!

First, let's install it:

$ npm install immer use-immer

Now add this import in one of your files:

import { useImmer } from 'use-immer';

We were editing the UserCardEditor component right? Let's replace the useState with useImmer:

- const [state, setState] = useState({
+ const [state, setState] = useImmer({
   id: 14,
   email: "[e-mail]",
   profile: {
     name: "Horus",
     bio: "Lorem ipsum dolor sit amet..."
   }
 });

For now, it's the same as before... But Immer actually allows us to mutate the data in order to update it! We can now replace our setState call with this:

setState(draft => { 
  draft.profile.bio = newBio;
});

Because we're using Immer, the library will work behind the scenes to create a copy of the object and apply the same modifications that we do to the draft object. With this, we can use mutation to update our React state!

Here's the final code:

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

function UserCardEditor() {
  const [state, setState] = useImmer({
    id: 14,
    email: "[e-mail]",
    profile: {
      name: "Horus",
      bio: "Lorem ipsum dolor sit amet..."
    }
  });

  function changeBio() {
    const newBio = prompt("New bio", state.profile.bio);

    setState(draft => {
      draft.profile.bio = newBio;
    });
  }

  return (
    <div>
      Name: {state.profile.name}
      <p>{state.profile.bio}</p>
      <button onClick={changeBio}>Change Bio</button>
    </div>
  );
}

export default UserCardEditor;

The use-immer library also has a replacement for useReducer, but we won't be covering it here, I recommend you to go to their repo and check out the examples:

immerjs / use-immer

Use immer to drive state with a React hooks

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

…

View on GitHub

---

That's all! Follow me on Twitter if you want to know more about my future projects, posts or whatever I came up with!