React useEffect is complaining about missing dependency even after destructuring

Question

Before you mark this as a duplicate - please understand that I have tried following most of the articles here on SO but none of them seem to help me out, perhaps I am overlooking something or I am having a brain fart today. So please excuse me for asking this question again.

In my component , I have the following code gist.

  let { teamid } = props.currentTeam
  useEffect(() => {
    if (teamid) {
      props.teamMembers(teamid);
    }
  }, [teamid]);

As you can verify from the code above , I am only using teamid in my useEffect. I am not using the entire props object. However, React stil complains with this message

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

Please let me know what I am doing wrong here. Any help will be well appreciated.

akhtarvahid · Answer 1 · 2020-11-14T04:21:28.767

3

Try to pass currentTeam and teamMembers to useEffect

let { currentTeam, teamMembers } = props

  useEffect(() => {
    if (currentTeam.teamid) {
      teamMembers(currentTeam.teamid);
    }
  }, [currentTeam, teamMembers]);

edited Nov 14 '20 at 04:21

answered Nov 14 '20 at 04:17

akhtarvahid

9,445
2
26
29

Sure I can try that, but isnt it the opposite of what the message is all about - it is asking me to not to use the entire props, no ? perhaps I am mistaken !! – Gagan Nov 14 '20 at 04:19
Thanks the update nailed it.. Its is much clearer now... that said , please excuse me but wi will mark the other answer as the correct answer becuase I was able to glean more information from his answer. thanks for all the help though !. Much appreciated. – Gagan Nov 14 '20 at 04:35

score 1 · Accepted Answer · answered Nov 14 '20 at 04:25

Basically what the react-hooks/exhaustive-deps warning is telling you is that you're still referencing the props object within the effect, which you are - you're not destructuring the props item out fully:

let { teamid } = props.currentTeam
useEffect(() => {
  if (teamid) {
    props.teamMembers(teamid); // PROPS STILL REFERENCED - ISSUE
  }
}, [teamid]); // NO DEPENDENCY FOR PROPS - ISSUE

Destructure the props object fully and include all the dependencies - with this the props object can update, and if the currentTeam or teamMembers properties don't change then your effect doesn't either:

const { currentTeam, teamMembers } = props // FULLY DESTRUCTURED
  
useEffect(() => {
  if (currentTeam.teamid) {
    teamMembers(currentTeam.teamid)
  }
}, [currentTeam.teamid, teamMembers]) // NO PROPS DEPENDENCIES

React useEffect is complaining about missing dependency even after destructuring

2 Answers2