React Hook "useEffect" is called conditionally
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()]);
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
}