How to early exit useEffect hook?

Question

In the docs it says that we should only call hooks at the top level of our components. Due to the API of useEffect, return is already reserved for the cleanup which made me wonder how I could early exit a useEffect hook to prevent deeply nesting my if statements.

// instead of
React.useEffect(() => {
  if (foo){
    // do something
  }
})

// I would rather write something like
React.useEffect(() => {
  if (!foo){
    // exit early and stop executing the rest of the useEffect hook
  }

  // do something
})

How can I achieve this? In my first example, things could quickly get messy with complex conditional logic especially considering that I can't be using useEffect inside a conditional statement.

Christiano

Like mentioned just doing return like in any JS function will work. But first it might be an idea to think about why you need the condition. Sometimes it might be better to split the component up more. For example, lets say we have a component called MultiEdit, and what we want to do is have a property called editType, this will render two different styles of controls, so it might need different useEffect semantics, rather than use if (!style1) return etc, you could just create 2 sub components, say called EditStyle1 & EditStyle2 etc. You can then conditionally render these. – Kowalski

I'm not quite sure why you'd want to reverse your logic to check for !condition when checking for the condition is clearer. But in any case, if...else if...else is the right approach and it works fine. Don't forget to clean things up you can break things out into multiple useEffect hooks if needed. – Troyes

Answer 1

As with any function, it can be exited early with return keyword.

These two snippets are equivalent:

React.useEffect(() => {
  if (foo){
    // do something
  }
})


React.useEffect(() => {
  if (!foo){
    return;
  }

  // do something
})

Gregarine

Oh so the cleanup will only be triggered if I return a function like return () => /* cleanup */? – Christiano

That's correct. return;, return undefined; and no return at all are fully interchangeable in JS. – Gregarine

I am getting a Unnecessary return statement no-useless-return error while trying to do the same – Maighdiln

@VedantShah It's linter error. If linter rule prevents you from writing the code you need then disable it, per line or per project. It could be the opposite, depending on the style of code it enforces. – Gregarine

In a useEffect, you can use an early return but it doesnt feel like a good pratice. If you want to use your unmount callback you have to break you early return logic. – Larimor

@GuillaumeHuardHughes Yes, it would be the same for any other case in JS that involves branching. But here there's likely no need for cleanup logic when an effect is a no-op – Gregarine

Answer 2

Please note that in React 18, you might get something like "destroy is not a function" error if you just "return" (return, or return false, or whatever) from useEffect.

That's because React 18 requires you to return a cleanup FUNCTION.

So an easy way out (not the best, I'd assume, but just as a quick fix), could be returning like that:

useEffect(() => {
  if (!goodToGo) {
    return () => {}
  }

  console.log("Doing stuff");
}, [goodToGo])

Bo

Answer 3

I think a simple solution is to create a function and do a return

 useEffect(() => {

        const fetchData = async () => {
           
           if (!foo) return

        }

        fetchData()

}, [])

Scruff