React Hook useEffect has a missing dependency:props

Question

I am currently building slack clone. I want to check whether the user is already logged in whenever the component mounts, first, if he is then push it home page else to the login page. I use react hooks to check instead of componentDidMount and also redux to store the login state of the user using mapDispatchToProps.

I am getting the warning

import React,{useEffect} from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Login from './components/Auth/login'
import Register from './components/Auth/register'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router,Switch,Route,useHistory,withRouter} from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import firebase from './firebase'
import { createStore } from 'redux'
import { Provider,connect} from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers/index';
import * as actions from './actions/index';
import Spinner from './spinner'
const store=createStore(rootReducer,composeWithDevTools())

const Root=(props)=>{  
  const history=useHistory()
  useEffect(() => {
    console.log("1")
    firebase.auth().onAuthStateChanged(user=>{
      if(user){
        props.setUser(user);
        history.push('/home')
      }
      else{
        history.push('/login')
        props.clearUser();
      }
    })
  },[history.location.hash,history])
  return props.isLoading ? <Spinner/>:(
    <Switch>
      <Route exact path="/home" component={App} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
    </Switch>
)
}
const mapStateToProps=state=>{
  return {
  isLoading:state.user.isLoading,
  user:state.user.currentuser
}}
const mapDispatchToProps=dispatch=>{
  return{
    setUser:(user)=>dispatch(actions.SETuser(user)),
    clearUser:()=>dispatch(actions.CLEARuser())
  }
}

const RootwithAuth=withRouter(connect(mapStateToProps,mapDispatchToProps)(Root))
ReactDOM.render(
<Provider store={store}>
<Router>
    <RootwithAuth/>
</Router>
</Provider>,
  document.getElementById('root')
);
reportWebVitals();

This may help you [link](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) — Dark shadow, Nov 09 '20 at 08:32

score 1 · Answer 1 · answered Nov 09 '20 at 08:40

1

You need to pass props as dependency. Which could lead to performance effect if you have lot of props. Better would be destructure your props and pass in dependency array.

In your case it would be like this:

const {setUser, clearUser} = props;

useEffect(() => {
    console.log("1")
    firebase.auth().onAuthStateChanged(user=>{
      if(user){
        setUser(user);
        history.push('/home')
      }
      else{
        history.push('/login')
        clearUser();
      }
    })
  },[history.location.hash,setUser,clearUser])

This is what warning trying to say

answered Nov 09 '20 at 08:40

Shubham Verma

4,918
1
9
22

Thank you very much it works fine.but when add props as a dependency array.it goes to infinte loop – suresh Nov 09 '20 at 08:59
you dont have to pass `props` you have to pass only those dependency which required in `useEffect`. See the code again. How I added it – Shubham Verma Nov 09 '20 at 09:01
@suresh `user` is passed as a prop from redux, so you ***don't*** want that in your dependency array for sure. Really it is *anything* the hook may update you don't want in the dependency array. Destructure and be as specific as possible as suggested. – Drew Reese Nov 09 '20 at 09:02
Thank you,now I am clear about this useeffect() stuffs – suresh Nov 09 '20 at 10:34

score 0 · Answer 2 · answered Nov 09 '20 at 08:43

0

It's eslint-plugin-react-hooks warning. It's telling you that hook depends on function call in useEffect you can use this comment top of code /* eslint-disable react-hooks/exhaustive-deps */ to tell ESLint to ignore the checking for your hook.

answered Nov 09 '20 at 08:43

hmd.fullstack

478
1
7
20

1

Recommending someone to blindly ignore warnings probably isn't a good thing. Would you ignore the low fuel warning in a car without any other context or experience with it? – Drew Reese Nov 09 '20 at 09:00
The comparison is not correct Ignore this case dosent side effect – hmd.fullstack Nov 09 '20 at 09:07
Adding the eslint disable should be a last resort or used only-if you are ***really*** confident you "know what you're doing", and it should *always* be accompanied with a comment as to *why* they are disabling the rule for that line. More naive devs may do this not realizing if they later update the effect that the dependencies may change, but since the rule is disabled the linter won't complain, their code won't work, and they won't know why (unless they've wised up). – Drew Reese Nov 09 '20 at 09:14

React Hook useEffect has a missing dependency:props

2 Answers2