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 · Accepted Answer · 2020-11-14 04:21:28Z

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, 2020 at 4:21

answered Nov 14, 2020 at 4:17

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gagan Over a year ago

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 Over a year ago

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.

Michael Abeln · Accepted Answer · 2020-11-14 04:25:56Z

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

Collectives™ on Stack Overflow

React useEffect is complaining about missing dependency even after destructuring

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related