Асинхронно обновлять свойство объекта в массиве с помощью useEffect

Question

Я бы хотел асинхронно обновить свойство объекта в массиве, используя useEffect, однако я не могу найти правильный способ сделать это как-то эффективно:

Проблема с кодомниже показано, что когда первая асинхронная операция завершается, эффект вызывается снова, поскольку редуктор обновил массив элементов.

Затем асинхронный вызов снова выполняется для всех остальных элементов, даже если выполняются асинхронные вызовы..

Кроме того, кажется очень неэффективным все время просматривать все элементы массива, чтобы узнать, какой из них должен вызвать асинхронную операцию.

Любая помощь будет принята с благодарностью!Спасибо!

const annotationsReducer = (state, action) => {
  switch (action.type) {
    // update target element in state
    case 'DONE':
      return {...state, state.elements!.map((item, i) =>
          item.id === action.value.element.id ?
          {...item, done: action.value.done } : item
        )}
    default:
      return {...state};
}

// initialize state
const [state, dispatch] = useReducer(
  annotationsReducer,
  { elements:[
      {id: 0, done: false},
      {id: 1, done: false},
    ]
  });

const updateProperty = async (element) => {
  await slowAsyncOperation();
  dispatch({type: 'DONE', value: {element, done:true}});
}

updatePropertyEffect = () => {
  state.elements.forEach(element => {
    if (!element.done) {
      updateProperty(element);
    }
  })
}

useEffect(updatePropertyEffect, state.elements);