Ditching useState and useReducer: Why useImmer is the better option

In React, useState and useReducer are commonly used for managing state. While useImmer is a popular alternative to useState, in this article, we will explore how it can also serve as a simpler and more effective alternative of useReducer.

In case you’…

In React, useState and useReducer are commonly used for managing state. While useImmer is a popular alternative to useState, in this article, we will explore how it can also serve as a simpler and more effective alternative of useReducer.

In case you’re not yet familiar with using useImmer and its usage as an alternative to useState, you can read the following section. Otherwise, feel free to skip ahead to the main section of this article.

 

In Case You’re Not Familiar with useImmer

 

useImmer is a custom React hook. It’s similar to useState but offers some distinct advantages, especially when it comes to managing complex state. With useImmer, you can update the state as if it were directly mutable, similar to regular JavaScript. It is possible because, behind the scene useImmer uses the Immer library to create a new immutable copy of the state.

 

To use useImmer, first, you need to install it by running the following command in your terminal:

npm install immer use-immer

 

A simple example of useImmer:

/* importing useImmer */
import { useImmer } from 'use-immer';

/* functional component */
function Count() {

  /* Declaring a new state variable using the useImmer hook.
    Here, we are initializing our state with a single
    property called "count" with an initial value of 0 */

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


  /* Defining a function that will modify our state */
  const increment = () => {
    /* calling the updateState function and passing as
       it a draft */
    updateState(draft => {
      /* Here we are directly modifying the draft as 
        if it were mutable */
      draft.count += 1;
    })
  }


  /* Defining another function that will modify our state */
  const decrement = () => {
    /* Calling the updateState function and pass it a draft */
    updateState(draft => {
      /*Here we are directly modifying the draft as 
        if it were mutable */
      draft.count -= 1;
    })
  }


  /* Rendering the UI using the state */
  return (
    <div>
      <h3>Count: {state.count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

 

Why should we use useImmer instead of useReducer

 

We will explore an example of useImmer that follows the useReducer pattern. We will create state and actions and use them in a similar way as useReducer, but with useImmer’s increased readability, flexibility, and mutability. Through this example, we will see why useImmer should be considered more than the useReducer.

 

Import useImmer and Create the Functional Component

 

// import useImmer
import { useImmer } from 'use-immer';

// functional component
function Cart() {

  // ... 

}

 

Define the Initial State

 

When using useReducer, it’s common practice to define the initial state before proceeding. Similarly, we will use this approach with the useImmer hook. To do this, we’ll create a state that is somewhat complex and resembles the state you would typically define with useReducer.

// initial state
const initialState = {
    items: [],
    shippingAddress: {
        street: '',
        city: ''
    }
}  

 

Create the State

 

We have defined our initial state. Now, we can create our state using the useImmer hook.

// Creating the state
const [cart, updateCart] = useImmer(initialState)

The useImmer hook returns an array containing two values: the current state (cart in this example), and a function that we can use to update the state (updateCart in this example).

 

Create Actions

 

When using the useReducer hook, it’s mandatory to define actions in order to update the state. Similarly, we will create actions for useImmer to resemble the same pattern and achieve predictable state updates.

const actions = {

    // Add an item to the cart
    addItemToCart: (payload) => {

        const { item } = payload

        updateCart(draft => {
            draft.items.push(item)
        });
    },

    // Remove an item from the cart
    removeItemFromCart: (payload) => {

        const { itemIndex } = payload

        updateCart(draft => {
            draft.items.splice(itemIndex, 1)
        })
    },

    // Update the shipping address of the cart
    updateShippingAddress: (payload) => {

        const { shippingAddress } = payload

        updateCart(draft => {
            draft.shippingAddress = shippingAddress
        })
    }
}

 

Defining actions using the above method provides two advantages over useReducer:

⚡️ Mutability: With useImmer, we have the power of mutable updates which allows for less code and more JavaScript-like code. This is in contrast to useReducer which requires a more functional programming approach and immutable updates. By using mutable updates in useImmer, you can achieve the same result with fewer lines of code, making it easier to write and maintain.

⚡️ Readability: Compared to useReducer, where the actions are typically defined as a switch case in a reducer function, the useImmer approach can be more readable as each action is a separate function with a clear and concise name.

 

Render the UI with JSX

 

Finally, we can use the cart state and the actions object in the JSX to render the UI.

<div>

    {/* Displaying the changes of the 'cart' state */}
    <p>Cart State: {JSON.stringify(cart)}</p>

    {/* Display a list of items in the cart */}
    <ul>
        {cart.items.map((item, index) => (
            <li key={index}>
                {item.name} - ${item.price}

                {/* Call the removeItemFromCart action when the remove button is clicked */}
                <button onClick={() => actions.removeItemFromCart({ itemIndex: index })}>Remove</button>
            </li>
        ))}
    </ul>

    {/* Call the addItemToCart action when the add item button is clicked */}
    <button onClick={() => actions.addItemToCart({ item: { name: 'Product', price: 9.99 } })}>
        Add Item
    </button>


    {/* Allow the user to update the shipping address */}
    <div>

        <h4>Shipping Address:</h4>

        <input type="text" placeholder="Street"
            value={cart.shippingAddress.street}
            onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, street: e.target.value } })}
        />

        <input type="text" placeholder="City"
            value={cart.shippingAddress.city}
            onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, city: e.target.value } })}
        />

    </div>


</div>

 

Advantages of Using useImmer over useReducer

 

We’ve already explored two advantages(Mutability & Readability) of using useImmer over useReducer in the Create Actions section. However, there’s one more significant advantage worth discussing, which we’ll cover in this section.

 

⚡️ Flexibility: With useImmer, it’s possible to update the state object outside of the defined actions. This is not possible in useReducer, and can be particularly helpful in certain situations where you need more flexibility in updating the state.

 
Here’s an example of how to clear the cart using useImmer without defining a new action:

<button onClick={() => updateCart(initialState)}>Clear Cart</button>

This button component will reset the cart state back to its initial state and clear all items in the cart. With useImmer, we can update the state object directly in this ad-hoc manner without the need for an action to be defined. This is not possible with useReducer, where all state updates must be dispatched through the defined actions.

 

Full Code

 

// import useImmer
import { useImmer } from 'use-immer';


// functional component
export default function Cart() {

    // Define the initial state of the cart
    const initialState = {
        items: [],
        shippingAddress: {
            street: '',
            city: ''
        }
    };

    // Call the useImmer hook to create a cart state 
    const [cart, updateCart] = useImmer(initialState);

    // Define a set of actions that can be used to update the cart state
    const actions = {

        // Add an item to the cart
        addItemToCart: (payload) => {

            const { item } = payload

            updateCart(draft => {
                draft.items.push(item)
            });
        },

        // Remove an item from the cart
        removeItemFromCart: (payload) => {

            const { itemIndex } = payload

            updateCart(draft => {
                draft.items.splice(itemIndex, 1)
            })
        },

        // Update the shipping address of the cart
        updateShippingAddress: (payload) => {

            const { shippingAddress } = payload

            updateCart(draft => {
                draft.shippingAddress = shippingAddress
            })
        }
    }


    // Render the cart UI
    return (

        <div>

            {/* Displaying the changes of the 'cart' state */}
            <p>Cart State: {JSON.stringify(cart)}</p>

            {/* Display a list of items in the cart */}
            <ul>
                {cart.items.map((item, index) => (
                    <li key={index}>
                        {item.name} - ${item.price}

                        {/* Call the removeItemFromCart action when the remove button is clicked */}
                        <button onClick={() => actions.removeItemFromCart({ itemIndex: index })}>Remove</button>
                    </li>
                ))}
            </ul>

            {/* Call the addItemToCart action when the add item button is clicked */}
            <button onClick={() => actions.addItemToCart({ item: { name: 'Product', price: 9.99 } })}>
                Add Item
            </button>


            {/* Allow the user to update the shipping address */}
            <div>

                <h4>Shipping Address:</h4>

                <input type="text" placeholder="Street"
                    value={cart.shippingAddress.street}
                    onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, street: e.target.value } })}
                />

                <input type="text" placeholder="City"
                    value={cart.shippingAddress.city}
                    onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, city: e.target.value } })}
                />

            </div>

            {/* Call the updateCart function with the initial state to clear the cart */}
            <button onClick={() => updateCart(initialState)}>Clear Cart</button>

        </div>
    )
}

 

That’s it. 😃 Thanks for reading. 🎉


Print Share Comment Cite Upload Translate
APA
Rasaf Ibrahim | Sciencx (2024-03-29T04:55:16+00:00) » Ditching useState and useReducer: Why useImmer is the better option. Retrieved from https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/.
MLA
" » Ditching useState and useReducer: Why useImmer is the better option." Rasaf Ibrahim | Sciencx - Saturday February 25, 2023, https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/
HARVARD
Rasaf Ibrahim | Sciencx Saturday February 25, 2023 » Ditching useState and useReducer: Why useImmer is the better option., viewed 2024-03-29T04:55:16+00:00,<https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/>
VANCOUVER
Rasaf Ibrahim | Sciencx - » Ditching useState and useReducer: Why useImmer is the better option. [Internet]. [Accessed 2024-03-29T04:55:16+00:00]. Available from: https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/
CHICAGO
" » Ditching useState and useReducer: Why useImmer is the better option." Rasaf Ibrahim | Sciencx - Accessed 2024-03-29T04:55:16+00:00. https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/
IEEE
" » Ditching useState and useReducer: Why useImmer is the better option." Rasaf Ibrahim | Sciencx [Online]. Available: https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/. [Accessed: 2024-03-29T04:55:16+00:00]
rf:citation
» Ditching useState and useReducer: Why useImmer is the better option | Rasaf Ibrahim | Sciencx | https://www.scien.cx/2023/02/25/ditching-usestate-and-usereducer-why-useimmer-is-the-better-option/ | 2024-03-29T04:55:16+00:00
https://github.com/addpipe/simple-recorderjs-demo