2

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
rachitiitr
  • 109
  • 8
  • Could you not simply log some [high resolution timestamps](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) and find out? – Phil May 12 '22 at 05:26
  • 2
    That's why I had in bold *guaranteed*. I can't rely on 20 executions and claim that its always the case. React is notorious for doing optimizations and they keep on changing with different React versions. – rachitiitr May 12 '22 at 05:32
  • React makes [no guarantees, and all source code is subject to change](https://github.com/facebook/react/blob/main/LICENSE). The only way to be sure that a feature works the way you expect for it to is to directly audit the exact source code that you have downloaded and are using. – jsejcksn May 12 '22 at 06:05
  • That being said, [the React docs claim](https://reactjs.org/docs/hooks-effect.html#:~:text=React%20will%20apply%20every%20effect%20used%20by%20the%20component%2C%20in%20the%20order%20they%20were%20specified.) that "React will apply _every_ effect used by the component, in the order they were specified." – jsejcksn May 12 '22 at 06:05
  • Yeah, but what about the cleanup? The documentation is very unclear. Even if they change the behaviour with each version, documentation can be updated accordingly. Its due to the lack of clarity I had to ask this question so that someone from React team or anyone who knows about this can answer in terms of effect, the cleanup effect as well as guarantees for React v17. – rachitiitr May 12 '22 at 06:14

0 Answers0