Is it valid to use the “return” keyword in a useEffect to stop code execution?

I was debating with a collegue today about using the “return” key in a useEffect to stop code execution. I have learned that using return should only be done in a cleanup.

The issue:

  useEffect(() => {
    if (stateCondition) {
      //do fancy stuff
      return;
    }
     
    // more code to execute if condition is not met
  }, [props]);

The way I see this is that we should perhaps have yet another useEffect that only execute if the state is false and not use the “return” as above.

I am trying to find some documentation to support my claim but so far I have not been able to.

What I am looking for:

Am I right here? is there documentation that supports my claim or the other way arround?

Answer

Technically it doesn’t really make a difference in this case. Because return; explicitly returns undefined, which is already implicitly returned by any JavaScript function which doesn’t return anything.

The React framework knows not to execute an undefined cleanup function, so no harm is done.

Returning anything else from a useEffect function other than a cleanup function or undefined could potentially cause bugs. You could test it if you want, but it’s kind of a moot point and nothing more than a passing curiosity, since you simply shouldn’t do it as cleaning up from useEffect is documented to happen from returning a function.

---

As an opinion, I would recommend never using return in any useEffect unless it’s explicitly a cleanup function. Even if no harm is done in this particular case, another developer who happens upon this pattern may not know that and may get confused about returning from an effect.

For this particular case, it seems a simple else block would produce the same logic.