DEV Community

Discussion on: Custom React Hooks: useArray

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.