React Hook “useEffect” is called conditionally

Question

React is complaining about code below, saying it useEffect is being called conditionally:

import React, { useEffect, useState } from 'react'
import VerifiedUserOutlined from '@material-ui/icons/VerifiedUserOutlined'
import withStyles from '@material-ui/core/styles/withStyles'
import firebase from '../firebase'
import { withRouter } from 'react-router-dom'

function Dashboard(props) {
  const { classes } = props
  
  const [quote, setQuote] = useState('')

	if(!firebase.getCurrentUsername()) {
		// not logged in
		alert('Please login first')
		props.history.replace('/login')
		return null
	}

	useEffect(() => {
		firebase.getCurrentUserQuote().then(setQuote)
	})

	return (
		<main>
			// some code here
		</main>
	)

	async function logout() {
		await firebase.logout()
		props.history.push('/')
	}
}

export default withRouter(withStyles(styles)(Dashboard))

And that returns me the error:

  Line 48:  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

Does anyone happen to know what the problem here is?

Answer 1

Your code, after an if statement that contains return, is equivalent to an else branch:

if(!firebase.getCurrentUsername()) {
    ...
    return null
} else {
    useEffect(...)
    ...
}

Which means that it's executed conditionally (only when the return is NOT executed).

To fix:

useEffect(() => {
  if(firebase.getCurrentUsername()) {
    firebase.getCurrentUserQuote().then(setQuote)
  }
}, [firebase.getCurrentUsername(), firebase.getCurrentUserQuote()])

if(!firebase.getCurrentUsername()) {
  ...
  return null
}

Answer 2

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. You can follow the documentation here.

I couldn't find the use case in the above code. If you need the effect to run when the return value of firebase.getCurrentUsername() changes, you might want to use it outside the if condition like:

useEffect(() => {
    firebase.getCurrentUserQuote().then(setQuote)
}, [firebase.getCurrentUsername()]);

Answer 3

The issue here is that when we are returning null from the if block, the useEffect hook code will be unreachable, since we returned before it, and hence the error that it is being called conditionally.

You might want to define all the hooks first and then start writing the logic for rendering, be it null or empty string, or a valid JSX.

Answer 4

I would argue there is a way to call hooks conditionally. You just have to export some members from that hook. Copy-paste this snippet in codesandbox:

import React from "react";
import ReactDOM from "react-dom";

function useFetch() {
  return {
    todos: () =>
      fetch("https://jsonplaceholder.typicode.com/todos/1").then(response =>
        response.json()
      )
  };
}

const App = () => {
  const fetch = useFetch(); // get a reference to the hook

  if ("called conditionally") {
    fetch.todos().then(({title}) => 
      console.log("it works: ", title)); // it works:  delectus aut autem  
  }

  return null;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's an example with a wrapped useEffect:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

function useWrappedEffect() {
  const [runEffect, setRunEffect] = React.useState(false);

  useEffect(() => {
    if (runEffect) {
      console.log("running");
      setRunEffect(false);
    }
  }, [runEffect]);

  return {
    run: () => {
      setRunEffect(true);
    }
  };
}

const App = () => {
  const myEffect = useWrappedEffect(); // get a reference to the hook
  const [run, setRun] = React.useState(false);

  if (run) {
    myEffect.run();
    setRun(false);
  }

  return (
    <button
      onClick={() => {
        setRun(true);
      }}
    >
      Run
    </button>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);