Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 28 Jul 2023 11:31 by ADMIN
David
Created on: 14 Oct 2022 06:16
Category: KendoReact
Type: Bug Report
1
Upload event newState batches state updates

Hi,

Please see the following example of the Upload component being used to transfer a single file to a byte array:

https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx

Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.

Now please see the exact same example but switched to the new createRoot API:

https://stackblitz.com/edit/react-y8fuya?file=app%2Fmain.tsx

Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.

I believe this is because of automatic batching in React 18.

Kind regards,

David

 

3 comments
ADMIN
Konstantin Dikov
Posted on: 28 Oct 2022 05:16

Hi David,

We have logged this in our public repository, where you can follow its progress:

For bringing the issue to our attention, you will find your Telerik Points updated.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

David
Posted on: 21 Oct 2022 04:29

Thanks Konstantin,

I believe it works for your examples because in both cases you are still hitting a save url, and the delay involved means the state updates aren't batched. Indeed, the issue can be 'fixed' in the example I provided by adding a simple 5ms sleep to the reader onload method.

The issue can also be fixed by wrapping the state update in onStatusChange with flushSync as documented here, but without knowing more about the Upload implementation it seems like an Upload issue to me because it's the event.newState returned by the Upload that is batching state updates.

Kind regards,

David

ADMIN
Konstantin Dikov
Posted on: 21 Oct 2022 03:24

Hello David,

Thank you for reaching out to us.

I have made some tests with createRoot with the default configuration of the Upload component and it seems that the progress/status are updated correctly:

I have also tested a different example that I had for handling saveUrl as a function (with axios) and it also updates the progress and the status correctly with createRoot:

With that in mind, your assumptions about the changes in the automatic batching might be correct, but I am not sure that we can do anything about the custom code within the saveUrl function internally in the Upload component to handle this. I will forward this to the dev team to see if they have some idea on how to resolve this, but from what I see the problem is with the custom saveUrl and the FileReader and not with the Upload component. 

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category