React Hook useEffect has a missing dependency: 'props'

Question

I am trying to use react hooks (this is my first time) but I get this error when using useEffect like the above componentDidMount: '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'

I'm trying to make a GET request to an API, and that needs some props in the url. This is my code:

function SomeComponent(props) {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${props.obj.id}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        props.totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, []);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I've been looking and tried these solutions, but they don't work for me:

const { id } = props.obj.id;
const {totalStats} = props.totalStats

useEffect(()=>{
//Here is the code
//I replace the $ {props.obj.id} by the id and the function props.totalStats by //totalStats
},[id,totalStats]

Doing it that way I obtained an undefined in the id and in the call to the function.

Then I tried doing it this way:

useEffect(()=>{
//here is the code like the first one

},[props])

But this makes n number of requests to the api

I don't think you need to put props in the dependency array... — evolutionxbox, Sep 10 '20 at 22:53
Yes, but that's what I was doing in the first code and I get this: 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 — Dfor, Sep 10 '20 at 22:55
Maybe this might help? https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook — evolutionxbox, Sep 10 '20 at 22:56

Yunus Tabakoglu · Accepted Answer · 2020-09-18T07:44:36.787

Remove the braces from the constant imports.

So it should look something like this:

function SomeComponent(props) {
  const objId = props.obj.id;
  const totalStats = props.totalStats;
  
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${objId}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, [objId, totalStats]);
}

Please describe what you did so that the OP and others can see what caused the error. — Ryan Wheale, Sep 10 '20 at 22:57

score 0 · Answer 2 · answered Aug 24 '21 at 12:52

The answer is accepted already but just to clarify why OP's solution didn't work in the begining is not about assigning consts. It is because OP made a mistake to destructure the properties. Correct way to do it:

const { id } = props.obj;
const {totalStats} = props

Notice that I didn't put props.object.id or props.totalStats. Because if you put these you are actually trying to destructure id from props.object.id object. And totalStats from props.totalStats. Which there weren't such properties so OP got the undefined error.

You can also assign a constant from the props object as the accepted answer's way. This is practically the same thing.

React Hook useEffect has a missing dependency: 'props'

2 Answers2