react - wait for side effects to be cleaned before unmounting component

Question

Is there a way to wait for the useEffect clean-up function to finish?

useEffect(() => {
    return async () => {
      dialog({show: true, title: 'Cleaning up the mess. Please wait.'});

      // Start a series of long running tasks
      await system.killProcess();
      await pollUntilProcessDoesNotExist(); // Do not go anywhere until this is done

      dialog({show: false, title: undefined });      
    };
  }, [selectedSequenceId]);

My question comes as the result of handling state when BE tasks take long time.

In my example, we have a system that does long time operations. When performing a long time operation it cannot do any other one. Trying to make system do other stuff will come as 409 errors. Because of this, I would like to know if we can wait until a clean-up function is done. If it is not possible, I would use a transitional route to wait in there until system is free.

More ideas are very welcome.

Answer 1

In general you don't want to block unmounting of UI, which tells me that unmount is the incorrect dependency for the effect that you've described. What is it that causes the unmount? A back button press or something like that? That button should instead kick off the long running task and then do the navigation.