Update state value of single object

I have list of items where I want to display a loader and hide it upon completing certain action.

For example, here is my array items

[
  {
    "id": "69f8f183-b057-4db5-8c87-3020168307c5",
    "loading": null
  },
  {
    "id": "30d29489-0ba9-4e00-bc28-8ad34ff1a285",
    "loading": true
  },
  {
    "id": "5f54ebbd-d380-4a54-bb1d-fc6c76dd1b72",
    "loading": false
  }
]

I am adding item to array with loading value as null the reason is. I want to process as soon as the the state is updated, hence I am using useEffect hook to observe for any change, if any new item with loading value null is added, then I proceed for action.

My problem is, when I try to modify a single loading value to false, it gives me weird behaviour and set all loading value to false.

What I want to have it, when I change the loading value of a single item in array, then the UI should re-render only for the changed item.

If you want to have a look at fiddle with working example, here is the link https://codesandbox.io/s/d8lh4-d8lh4

Where am I going wrong here?

It's simple use this code:

setTimeout(() => {
      setItems((existingItems) =>
        existingItems.map((item) =>
          item.id === newItem?.id ? { ...item, loading: false } : item
        )
      );
    }, 2000);

Looking at your code, I think the issue is related to accessing the wrong value of newItem and items in setTimeout. Both of them can be solved by doing something similar to the one below.

 const handleUpload = newItem => {
  // set loading to false to new item after 2 seconds
  setTimeout(
    theNewItem => {
      setItems(exisitingItems =>
        exisitingItems.map(item =>
          item.id === theNewItem.id ? { ...item, loading: false } : theNewItem,
        ),
      );
    },
    2000,
    newItem,
  );
};

You have [items] dependency in your useEffect, which is calling setItems in loop in your handleUpload function.