Let's say we have 3 useEffect calls with effect2 having a dependency on props.abc while effect1, effect3 have no dependency.

1. Would execution order of functions be guaranteed effect1 > effect2 > effect3 after mount?
2. Would execution order of functions be guaranteed effect1Clean > effect2Clean > effect3Clean after unmount?
3. Is cleanup run after component is removed from DOM as well as UI?

Can someone please help in understanding with clarity?
It gets very confusing with just one line answers like cleanup is fired asynchronously to let browser paint.

function Comp(props) {
  useEffect(function effect1(){return function() effect1Clean{}}, []);
  useEffect(function effect2(){return function() effect2Clean{}}, [props.abc]);
  useEffect(function effect3(){return function() effect3Clean{}}, []);

  return (<div>hi</div>);
}

My use case is to store a ref to a new CustomWebSocketClass after mount, then subscribe/unsubscribe to props.abc as and when it changes, and finally call the destroy method of my ref after unmount. But I want to unsubscribe for lats props.abc before calling the destroy method i.e order of cleanup effects is important.

I have went through multiple similar Stackoverflow questions and Github issues, shared below. But either they are subtly different or too old and not relevant now.

1. What's useEffect execution order and its internal clean-up logic in react hooks?
2. What is the correct order of execution of useEffect in React parent and child components?
3. https://github.com/facebook/react/issues/16728