React state not updating after await - useState

Question

Im trying to update multiple file upload status but after await not updating to any state

 const uploadFiles = async () => {
        let tradeFileListNew = [...tradeFileList];
    
        for (const fileList of tradeFileListNew) {
          if (fileList.status == "not-yet") {
            let index = tradeFileListNew.indexOf(fileList);
            tradeFileListNew[index].status = "started";
        setTradeFilesToUpload(tradeFileListNew);
 
        const formData = new FormData();
        formData.append("file", fileList.file);
        formData.append("service_type", "attachments");

        let res = await api.uploadCompanyFile(formData);
        tradeFileListNew[index].status = "completed";
        setTradeFilesToUpload(tradeFileListNew);

        
      }
    }
  };

Answer 1

Notice you're calling setTradeFilesToUpload(tradeFileListNew); multiple times, and attempting to mutate tradeFileListNew in between. React is going to ignore the second call to setTradeFilesToUpload because it's passed the same reference, so it's assumed to be a no-op.