Parallel fetches capture the component state leading to race condition

Description

What I Need

I want to trigger several fetch-based Promises in parallel. Whenever each of these promises resolves, the value should be processed and appended to component state (items). In other words, I want the items state to be updated with each promise resolution, rather then one time when all promises resolve.

Issue

The issue is that if I let each promise have a .then() handler that processes own resolved value, then items state is being captured in each closure. This leads to first handler calling setState with [...items, firstResultItem], second -- with [...items, secondResultItem] and so on. Each closure is not seeing the changes made to items state from the other handler. This race condition results in latest-fetch-wins kind of situation, which is undesireable.

The issue is solved easily if I have a single promise handler applied to Promise.all(...), but this goes against the desired component behavior.

Thoughts

I was thinking about using useRef together with useState or find a way to leverage useEffect, but I think this is a typical problem that must already have an idiomatic solution.

Code

• For simplicity, the fetches are faked with imitateFetch(promiseResolutionValue, delayInMs).
• items has a default state of a single item; all the new items produced from imitateFetch should be appended to current state of items.
• See Executable example on codesandbox

import { useRef, useState } from "react";

export interface Item {
  id: string;
  text: string;
}

export function App() {
  const [items, setItems] = useState<Item[]>([
    { id: new Date().toISOString(), text: new Date().toLocaleTimeString() },
  ]);

  const naiveUpdateItemListWith = (newItemTexts: string[]) => {
    const newItems = newItemTexts.map(newItemText => {
      const item: Item = {
        id: new Date().toISOString(),
        text: newItemText,
      };
      return item;
    });
    setItems([...items, ...newItems]);
  };

  const handleTriggerFetch = () => {
    //   Buggy variant.
    const one = imitateFetch('one', 1000).then(text => naiveUpdateItemListWith([text]));
    const two = imitateFetch('two', 1500).then(text => naiveUpdateItemListWith([text]));
    const three = imitateFetch('three', 2000).then(text => naiveUpdateItemListWith([text]));
    Promise.all([one, two, three]);

    //   These works, but the update happens once, when ALL promises resolve.
    // const one = imitateFetch('one', 1000);
    // const two = imitateFetch('two', 1500);
    // const three = imitateFetch('three', 2000);
    // Promise.all([one, two, three]).then(texts => naiveUpdateItemListWith(texts));
  };

  return (
    <div>
      {items.map(item => <div key={item.id}>[{item.id}] -- {item.text}</div>)}

      <button onClick={handleTriggerFetch}>
        Imitate parallel fetches
      </button>
    </div>
  );
} 

function imitateFetch<T>(valueToResolve: T, ms = 1000): Promise<T> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(valueToResolve);
    }, ms);
  });
}

Unless I misunderstand your question, the solution is actually simple. You can pass an updater function to your setItems function, which takes the previous state as an argument, and returns the new state. The updater function takes the pending state and calculates the next state from it, so it would eliminate race conditions.

setItems((i: Item[]) => [...i, ...newItems]);