useImmer, an excelent alternative to useState

Jesus Jimenez Cordero — Wed, 22 May 2024 16:38:41 +0000

Surely you have ever found yourself in the situation where a useState looks longer than all the code together in your component, either because you have to update a very large object or because you need a large amount of code to access a single property within that object, which looks even worse if the value you are trying to access is very nested.

Whether you are new to React or you have been programming for years, this situation is not alien to you, since one of the problems (at least in my opinion) and advantages of React is the immutability of its values; which causes the situation I mentioned at the beginning. One of the solutions that I recently found to solve this situation, is the use of the Immer package and more specifically, the hooks that they created, called useImmer and useImmerReducer, both very useful.

An example of the problematic situation that I mention to you is the following one:

import React, { useState } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState({
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com',
    address: {
      street: '123 Main St',
      city: 'Anytown',
      state: 'CA',
      zip: '12345',
    },
    preferences: {
      theme: 'dark',
      notifications: true,
    },
  });

  const updateUser = (userId, newDetails) => {
    if (user.id === userId) {
      setUser((prevUser) => ({
        ...prevUser,
        ...newDetails,
      }));
    }
  };

  const handleChangeAddress = () => {
    const newAddress = {
      address: {
        street: '456 Another St',
        city: 'New City',
        state: 'NY',
        zip: '67890',
      },
    };
    updateUser(1, newAddress);
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <h2>Address</h2>
      <p>Street: {user.address.street}</p>
      <p>City: {user.address.city}</p>
      <p>State: {user.address.state}</p>
      <p>Zip: {user.address.zip}</p>
      <button onClick={handleChangeAddress}>Change Address</button>
    </div>
  );
};

export default UserProfile;

Probably, for you, at this moment, this update does not look abnormal, because you are probably already used to see it in React, but the reality is that if more than one person had to read this code it would be a punishment. As programmers we should always consider that code readability is a priority so we don't depend on comments (except in specific situations) or KTs that can take time that can be used for development. This code can look much cleaner and it should be so, because if we analyze it with a little perspective, this code is not doing a very complex update, since it is only updating the address and nothing else, now imagine if we had to update more properties of this object, each one at a different nesting level, it would be very complex to write and read, wouldn't it?

This is an example of the same code you just saw above, but now using useImmer. You'll be surprised at how easy it is to implement, but especially to read:

import { useImmer } from 'use-immer';

const UserProfile = () => {
  const [user, setUser] = useImmer({
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com',
    address: {
      street: '123 Main St',
      city: 'Anytown',
      state: 'CA',
      zip: '12345',
    },
    preferences: {
      theme: 'dark',
      notifications: true,
    },
  });

  const handleChangeAddress = () => {
    setUser(draft => {
      if (draft.id === 1) {
        draft.address.street = '456 Another St';
        draft.address.city = 'New City';
        draft.address.state = 'NY';
        draft.address.zip = '67890';
      }
    });
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <h2>Address</h2>
      <p>Street: {user.address.street}</p>
      <p>City: {user.address.city}</p>
      <p>State: {user.address.state}</p>
      <p>Zip: {user.address.zip}</p>
      <button onClick={handleChangeAddress}>Change Address</button>
    </div>
  );
};

export default UserProfile;

I think after this, you are now able to see a difference in the code and the advantage of implementing this hook. Probably at this moment it will seem that it is not so drastic as to want to replace the use of useState by useImmer, but surely you could consider implementing it in future projects that have large amounts of updates in a state, that surely can save you a lot of headaches.

The useImmerReducer hook has a very similar functionality and is just as useful in examples very similar to the one I just showed you. I recommend you to always try alternatives that help your code to be more readable, after all, you will not always be working alone and readability in the code is always useful for both you and your partners, because going back to an old code, even written by you, is complicated if it is not clear enough.

The importance of using 'Infinity' on your JavaScript code.

Jesus Jimenez Cordero — Fri, 10 Mar 2023 03:06:07 +0000

Sometimes you need to have the biggest number to do some comparations in your code for some conditionals that can not be solved just using a specific number, so in this case, we have a solution for that and it is so simple Infinity reserved word on JavaScript. But first of all, what it means Infinity on JavaScript?

A number reaches Infinity when it exceeds the upper limit for a number: 1.797693134862315E+308

And it is the same case for negative numbers: -1.797693134862316E+308

And you could say, what is the purpose of using an Infinity number? Well, the question is so big and maybe I will not be able to answer to that but I will try to show you a little example where we could see the purpose of using an Infinity number.

We have the next example where we need to get the second-highest number with the array variable and maybe the first approach that we have maybe could be the next.

let input = [3, 1, 4, 2, 5];

function secondHighest(array) {
  let highest = Math.max(...array);
  let secondHighest = 0;

  for (let i = 0; i < array.length; i++) {
    if (array[i] > secondHighest && array[i] < highest) {
      secondHighest = array[i];
    }
  }

  return secondHighest;
}

The previous code will be working correctly and we will get the output: 4 as we expected. That is fine but, what happens when we have negative numbers?

let input = [-3, -1, -4, -2, -5];

Maybe we could set on the conditional the lowest number than the rest of the negative numbers on the array but that's not the best solution because we could have a problem identifying that specific number and maybe we will not get the correct output. For example, if we execute the next code as it is the output will be 0 because any other number is biggest than 0, that is, or first conditional with the variable secondHighest.

How we could resolve that problem in this case? Using a negative Infinity number.

function secondHighest(array) {
  let highest = Math.max(...array);
  let secondHighest = -Infinity;

  for (let i = 0; i < array.length; i++) {
    if (array[i] > secondHighest && array[i] < highest) {
      secondHighest = array[i];
    }
  }

  return secondHighest;
}

Here you will get the correct output without using any other negative number, so here you see a good example of using Infinity numbers in your next functions, components or code in general so try it and you will see how helpful is to use this amazing JavaScript tool.

Forem: Jesus Jimenez Cordero

useImmer, an excelent alternative to useState

The importance of using 'Infinity' on your JavaScript code.