How to remove the “React Hook useEffect has missing dependencies” warning

Question

Here is my component function:

function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const getData=async ()=>{
        let roster=new Roster();
        let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
        setRosterList(rosterData);
    }
    useEffect(()=>{
        getData();
        console.log(Object.keys(rosterList));
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

It prompts the following warning message when the component is called:

Line 14:7:  React Hook useEffect has missing dependencies: 'getData' and 'rosterList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

When I move the getData function into the useEffect function, it prompts:

React Hook useEffect has missing dependencies: 'props.rosterMonth', 'props.rosterYear', and 'rosterList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

When I change function to the following:

import { useEffect,useState} from 'react';
import Roster from '../../../utils/roster';

function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const rosterMonth=props.rosterMonth;
    const rosterYear=props.rosterYear;
    useEffect(()=>{
        const getData=async ()=>{
            let roster=new Roster();
            let rosterData=await roster.get(rosterYear,rosterMonth);
            setRosterList(rosterData);
        }
        getData();
        console.log(Object.keys(rosterList));
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

I got the following message:

React Hook useEffect has missing dependencies: 'rosterList', 'rosterMonth', and 'rosterYear'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

When the code is changed to the following:

function RosterRows(props){
    const [rosterList,setRosterList]=useState({});
    const rosterMonth=props.rosterMonth;
    const rosterYear=props.rosterYear;
    useEffect(()=>{
        const getData=async ()=>{
            let roster=new Roster();
            let rosterData=await roster.get(rosterYear,rosterMonth);
            setRosterList(rosterData);
            console.log(rosterData);
        }
        getData();
    
    },[]);
    
    return(
        <tr><td></td></tr>
    );
}
export default RosterRows

It prompts the following message:

Line 5:12:  'rosterList' is assigned a value but never used                                                                                    no-unused-vars

Line 17:7:  React Hook useEffect has missing dependencies: 'rosterMonth' and 'rosterYear'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Would you tell me how to fix the problem?

Answer 1

The problem is console.log(rosterList) inside the effect. getData sets the rosterList in the state but setting state is not synchronous in React.

This will work as expected and doesn't have infinite loop and properly specifies the effect's dependencies:

function RosterRows(props) {
  const [rosterList, setRosterList] = useState({});

  useEffect(() => {
    const getData = async () => {
      let roster = new Roster();
      let rosterData = await roster.get(props.rosterYear, props.rosterMonth);
      console.log(Object.keys(rosterData));
      setRosterList(rosterData);
    };
    getData();
  }, [props.rosterYear, props.rosterMonth]);

  return (
    <tr>
      <td></td>
    </tr>
  );
}
export default RosterRows;

Answer 2

If you ensure your useEffect hooks will just run once on component mount, you can just disable the eslint rule

useEffect(()=>{
    const getData=async ()=>{
        let roster=new Roster();
        let rosterData=await roster.get(rosterYear,rosterMonth);
        setRosterList(rosterData);
    }
    getData();
    console.log(Object.keys(rosterList));
},[]); // eslint-disable-line