How to do cleanup in a workload React component

[box-turtle]

Our workload is a notebook experience so when it loads we have to allocate some resources that need to be cleaned up if the user exits the page.

When the user leaves the page, we would expect the react component to unload and any cleanup methods from useEffect hooks or windowbeforeunload even handlers would fire.

However it seems that if the user navigates using buttons/links OUTSIDE the iframe, all this does is set display:none on the iframe container, so I can find no event or callback that gets fired in this case.

Does the workloadClient expose any events when this kind of external navigation occurs?

If not can you suggest any other way to handle cleanup tasks when the user navigates away?

[anitamayorov]

Hi @box-turtle,

You need to register to OnAfterNavigateAway event - you can take a look at the following sample code:

Microsoft-Fabric-workload-development-sample/Frontend/src/controller/SampleWorkloadController.ts

Line 195 in b64b0ba

export async function callNavigationAfterNavigateAway(workloadClient: WorkloadClientAPI) {

When catching that event, you can do all the desired cleanup.

[box-turtle]

Thanks Anita - that works perfectly.

…

On Wed, Jul 3, 2024 at 4:33 AM anitamayorov ***@***.***> wrote: Hi @box-turtle <https://github.com/box-turtle>, You need to register to OnAfterNavigateAway event - you can take a look at the following sample code: https://github.com/microsoft/Microsoft-Fabric-workload-development-sample/blob/b64b0bac0b0f0f1433df9e26bde0839174cc796b/Frontend/src/controller/SampleWorkloadController.ts#L195 When catching that event, you can do all the desired cleanup. — Reply to this email directly, view it on GitHub <#23 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6QP75LIQYYWHLSST7Z5JLZKOZMNAVCNFSM6AAAAABKH4VWGSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TSNBVGM4DO> . You are receiving this because you were mentioned.Message ID: <microsoft/Microsoft-Fabric-workload-development-sample/repo-discussions/23/comments/9945387 @github.com>