Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React Hook “useEffect” is called conditionally without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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
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
}
We are here to answer your question about React Hook “useEffect” is called conditionally - If you find the proper solution, please don't forgot to share this with your team members.