React Hook useEffect has a missing dependency when function call

Question

I am struggling due to waring from eslint.

Below is sample code and once I run the below code, I get the waringing from eslint.

React Hook useEffect has a missing dependency: 'maxId'. Either include it or remove the dependency array.

How can I remove the warining?

I want to make the process to call the loadMapData function only when pageNo and StartDate are changed.

Sample Code;

import React, { useState, useEffect, useCallback } from "react";

const VehicleHistory = (props) => {
  //console.log("VehicleHistory");
  
  const pageSize = 10;

  const [mapData, setMapData] = useState();
  const [pageNo, setpageNo] = useState(1);
  const [startDate, setstartDate] = useState(100);
  const [maxId, setmaxId] = useState(0);

  useEffect(() => {
    console.log("useEffect.pageNo chainging====");

    
  const loadMapData = async () => {
    console.log('call loadMapData====');  
    try {
        //Api call to get list data
        //No meaning. Just for testing
        const _pageNo = pageNo;
        const _pageSize = pageSize
        const _maxId = maxId;
        setMapData('test'+_pageNo + _pageSize+_maxId);
        setmaxId(_pageNo + _pageSize);

    } catch (err) {
      console.log("err", err);
    }
  }

  
    loadMapData();
  }, [pageNo]);


  useEffect(() => {
    console.log("useEffect.startDate chainging====");
    setMapData(null);
    setpageNo(1);

  }, [startDate]);




  return (
    <div>
      <button onClick={e => setpageNo(p => p + 1)}>Change page</button>
      <button onClick={e => setstartDate(s => s + 1)}>Change date</button>
      
      <br />pageNo : {pageNo}
      <br />startdate : {startDate}
      <br />mapdata : {mapData}
    </div>
    
  );
};

export default VehicleHistory;

This will help: https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook — Niyas Nazar, Aug 31 '20 at 04:19
put `maxId` as dependancy `....}, [pageNo, maxId]); ` otherwise `maxId` inside the effect may not be get changed, check this out https://www.youtube.com/watch?v=SP-NrbQHFww&list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A&index=11 — Kalhan.Toress, Aug 31 '20 at 04:20

score 0 · Answer 1 · answered Aug 31 '20 at 04:52

Issue is here in this code. Basically inside useEffect you are expecting maxId. you need to understand how useEffect work. useEffect required array of dependency which ensure it will run whenever these value changes. So in your case maxId is changing. And useEffect is not sure what to that's why eslint giving error.

useEffect(() => {
    console.log("useEffect.pageNo chainging====");

    
  const loadMapData = async () => {
    console.log('call loadMapData====');  
    try {
        //Api call to get list data
        //No meaning. Just for testing
        const _pageNo = pageNo;
        const _pageSize = pageSize
        const _maxId = maxId; <- Issue is here
        setMapData('test'+_pageNo + _pageSize+_maxId);
        setmaxId(_pageNo + _pageSize);

    } catch (err) {
      console.log("err", err);
    }
  }

  
    loadMapData();
  }, [pageNo]);

Solution:

useEffect(() => {
...code
},[pageNo,maxId]) <- add maxId in dependency array

Thanks for replying. But when I added the maxId at the dependancy array, the function was called twice. Isn't there any way to call the function just once? — lime, Aug 31 '20 at 05:05
You need then some kind of previous hook value. If both(in your case `maxId`) are same do not call function. Its like `componentDidUpdate` . Here is the reference: https://usehooks.com/usePrevious/ — Shubham Verma, Aug 31 '20 at 05:15
Anytime :-) . If this help you mark this answer as accept and upvote it. So that in future someone stuck on same problem this question popup (this is how stackoverflow algorithm work :-\) — Shubham Verma, Sep 02 '20 at 05:20

React Hook useEffect has a missing dependency when function call

1 Answers1