DEV Community

Cover image for Custom React Hooks: useArray
Ludal 🚀
Ludal 🚀

Posted on • Updated on • Originally published at iamludal.fr

Custom React Hooks: useArray

Another week, another custom React hook for your hooks backpack. In this episode, we'll implement the useArray hook to make arrays management easier. Ready? Let's go! 😎

Motivation

As usual, let's first discover how this hook could be useful to you. Let's be original and creative: suppose you are building a To-Do list application with React. At some point, you'll have to manage the user's tasks: to do so, you'll use an array, along with the useState hook. The addTask function might look like this:

const addTask = (newTask) => {
  setTasks(oldTasks => [...oldTasks, newTasks])
}
Enter fullscreen mode Exit fullscreen mode

Then, you'd have a removeTask function, that could look like this:

const removeTask = (index) => {
  setTasks(oldTasks => oldTasks.filter((_, i) => i !== index))
}
Enter fullscreen mode Exit fullscreen mode

As you can see, this can quickly become a bit hard to read.

This is why we will create the useArray hook to simplify our code.

Implementation

First, let's create the hook's base structure.

const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue)

  return { value, setValue }
}
Enter fullscreen mode Exit fullscreen mode

Then we'll add the push function to add an element at the end of the array.

const push = element => {
  setValue(oldValue => [...oldValue, element]);
};
Enter fullscreen mode Exit fullscreen mode

Let's also create the remove function to remove an element at a given index.

const remove = index => {
  setValue(oldValue => oldValue.filter((_, i) => i !== index));
};
Enter fullscreen mode Exit fullscreen mode

It can also be handy to add an isEmpty function to check for the array emptiness.

  const isEmpty = () => value.length === 0;
Enter fullscreen mode Exit fullscreen mode

Combining all these functions together, here's how the final hook will look like:

const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue);

  const push = element => {
    setValue(oldValue => [...oldValue, element]);
  };

  const remove = index => {
    setValue(oldValue => oldValue.filter((_, i) => i !== index));
  };

  const isEmpty = () => value.length === 0;

  return { value, setValue, push, remove, isEmpty };
};
Enter fullscreen mode Exit fullscreen mode

If you are working with large amount of data, feel free to optimize this hook by using useCallback (more info here).

Example:

const push = useCallback(element => {
  setValue(oldValue => [...oldValue, element])
}, [])

Also, if you need other array methods such as map or unshift, don't hesitate to adapt it to your needs (you can even add custom functions).

Usage

Back to our To-Do list example. By using our brand new hook, this is how the component could now look like:

const TodoList = () => {
  const tasks = useArray([]);
  const [newTask, setNewTask] = useState("");

  // "Add" button clicked
  const handleSubmit = e => {
    e.preventDefault();
    tasks.push(newTask);
    setNewTask("");
  };

  const handleInputChange = e => setNewTask(e.target.value);

  return (
    <>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={newTask} onChange={handleInputChange} />
        <button>Add</button>
      </form>
      {tasks.isEmpty() ? (
        <p>No tasks to display</p>
      ) : (
        <ul>
          {tasks.value.map((task, index) => (
            <li key={index}>
              <input
                type="checkbox"
                onClick={() => tasks.remove(index)}
                checked={false}
              />
              {task}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

Notice that we don't even need the addTask and removeTask functions anymore, as our tasks.push and tasks.remove ones are already explicit and easy to read.

Improvement Ideas

To go further, here are some ideas of improvements to enhance this hook.

  • Adding a reverse function to reverse the array
  • Adding a sort function to sort the array
  • Adding a clear function to clear the array

Conclusion

I hope this hook will be useful to you for your future (or existing) projects. If you have any questions, feel free to ask them in the comments section.

Thanks for reading me, and see you next time for a new custom hook. 🤗


Source code available on CodeSandbox.


Support Me

If you wish to support me, you can buy me a coffee with the following link (I will then probably turn that coffee into a new custom hook... ☕)

Buy Me A Coffee

Top comments (11)

Collapse
 
ericbdev profile image
Eric

Nice simplification for the general create/delete -- but what about a simple update?

In a larger context I often see mistakes when in a cooersive/mutable case like react+js. For some people adding splice/slice into a case useArray might not come natural.

Collapse
 
iamludal profile image
Ludal 🚀

What about this? (in O(n), but in all cases, I guess we have no other choice, since making a copy of the original array to make the replacement in O(1) would already be in O(n) too)

const update = (index, newElement) => {
  setValue(oldValue => oldValue.map((element, i) => (
    i === index ? newElement : element
  )))
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
op profile image
op

Immer (and its useImmer hook) can be a lifesaver when dealing with arrays, especially nested ones. It lets you write much simpler update logic while managing all the immutability for you.

I made a similar todo example here using it (although a normal useState realistically would have sufficed): codesandbox.io/s/magical-ride-9l8d...

beta.reactjs.org/learn/updating-ob...

Collapse
 
iamludal profile image
Ludal 🚀

Interesting, thanks for sharing. But this looks like the default useState way to deal with arrays, doesn't it? (With just your example, I don't really understand the benefits of using it.)

Thread Thread
 
op profile image
op • Edited

I agree it's not a very good example for showing the benefits of Immer, but basically it just allows you to write "mutating" syntax while not actually mutating the data. Try recreating my toggleCompleted function with useState and you'll see the difference.

Take this slightly more complex data structure:

const [product, setProduct] = useState({
  name: "Sneaker",
  stock: [
    {
      id: 1,
      store: "Store 1",
      quantity: 10
    },
    {
      id: 2,
      store: "Store 2",
      quantity: 20
    }
  ]
});
Enter fullscreen mode Exit fullscreen mode

If you wanted to update the quantity of a stock item with useState you would maybe do something like this:

setProduct({
  ...product,
  stock: product.stock.map((s) => {
    if (s.id === store.id) {
      return { ...s, quantity: s.quantity - 1 };
    }
    return s;
  })
});
Enter fullscreen mode Exit fullscreen mode

With useImmer you can instead do this:

setProduct((product) => {
  const s = product.stock.find(s=>s.id === store.id);
  s.quantity--;
});
Enter fullscreen mode Exit fullscreen mode

Might not be a big deal, but for me the latter takes less mental effort.

codesandbox.io/s/heuristic-wiles-p...

Thread Thread
 
iamludal profile image
Ludal 🚀

Okay now I see the benefits, and I totally agree with you! Never had to deal with such complex examples though, but it's great to have this library in mind. 🙌

Thread Thread
 
ericbdev profile image
Eric

But I can see this saving time again and again just due to its simplified mental model.

Writing nested spread after nested spread gets a little complicated after a while. Now I'm so far down the pattern that when I see syntax looking like it's mutating a variable out of scope I balk a little. All the same, it would be a nice tool.

Thread Thread
 
op profile image
op

Yeah, it definitely feels dirty writing it that way at first but it's a small price to pay for getting away from some nested spread abominations.

Collapse
 
alvisonhunter profile image
Alvison Hunter Arnuero | Front-End Web Developer

Superbe, merci beaucoup, pote!

Collapse
 
iamludal profile image
Ludal 🚀

Avec plaisir ! You're the most welcome.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.