[Question] Updating atom from async loop

[artem-tarasenko]

Hello, I've been fiddling with Recoil and my testing application and stuck with a bit of functionality. I hope you can clarify what's happening and how to approach this. So...

I'm basically building custom files uploader and I want it to respond to each individual file being uploaded by showing something like '12 of 38 files uploaded".

What do I have:
a filesAtom that contains an array of objects for each file dropped to the uploader

const filesAtom = atom({
  key: 'files',
  default: [{
      file: File,
      isDone: bool,
      ...
}],
});

Now, apart from some atoms to track UI states there is an async function that uses tus-js-client to upload file to the server and respond with uploaded file name. I tried to update my filesAtom to chance that file "state". But the thing is, files from atom is an incoming data to my "uploading func" where it goes through the async loop to load them. Something like this:

async function createFile(file: File) {
    ...
    returns Promise<string>
}

createFile returns an uploadLink for uploadFile()

async function uploadFile({ file, uploadLink, onProgressFn, onFinishFn }) {
    return new Promise( resolve ) => {
        const upload = new tus.Upload(file, {
           ...
           //request config,
            onError: function (error) {
                //handle error
            },
            onProgress: function () {
                //calc the progress %
                 onProgressFn(progress) // which is an Atom Progress setter
            },
            onSuccess: function () {
                ...
                resolve(filename); //here I wanted to return the filename to update filesAtom (change file isDone state to true)
            },
        });

        // Start the upload
        upload.start();
    });
}

async function handleUploadFiles({ files, onProgressFn, onFinishFn }) {
    for await (const fileObj of files) {
        const uploadingLink= await createFile(fileObj.file);

        const filename = await uploadFile({
            file: fileObj.file,
            uploadLink: uploadingLink,
            onProgressFn: onProgressFn,
            onFinishFn: onFinishFn,
        });

       //use file name from the Promise above to make a new files[] and set it with setFiles
       //doesnt work like that
    }
}

and then I run this from my component

function MyComponent() {
      const [files, setFiles] = useRecoilState(filesAtom);
      const [progress, setProgress] = useRecoilValue(progressAtom);
      
      ...

      handleUploadFiles({ files , setProgress , setFiles});

      return (...)
}

So, loading bar is updated while each file is being loaded by passing progress setter all the way to uploadFile(). But progress is a bit different story.
Files on the other hand, updates rather unexpectedly for me. As I use files to run the loop, and passed files setter to it, well, whenever each file is finished uploading the setter is triggered and updates the state "isDone" of that particular file, but next time loop iterate it passes initial files array into it where all files has "isDone: false" state and accordingly, the second file will be set to "isDone" - all others are not.
The question here - how can I update atom from the function that relies on data from that atom (files) or I should not...? If not, how to approach this situation? Should I use whatever files array but not the state? or selector will do? Recoil is so agile I cannot grasp the right direction to solve my task

Would appreciate any ideas about it, thanks.

[honzabrecka]

useRecoilState (and all other hooks/fns where you can set state) accepts updater fn (state) => state where you get latest state with all the changes applied - not the state used in current render. Basically the interface and usage is the same as useState from react.

But I would reconsider the model of atoms and store the whole upload (promise) in an atom, so there's no isDone flag etc.

[artem-tarasenko]

Turns out to be such a simple solution, great, that works. Thanks for advice