React Hook React.useEffect 缺少依赖项：“loadData”。 包含它或删除依赖项数组

Question

I am getting this warning in the following component in react js React Hook React.useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array. can't figure out what is the issue

const ManageCourses = (props) => {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    loadData();
  }, [props.instructor]);

  const loadData = async () => {
    setLoading(true);
    await axios
      .get(
        "http://localhost:4000/api/instructorcourses/" +
          props.instructor.InstructorID
      )
      .then((res) => {
        setData(res.data);
        setLoading(false);
      });
  };

  return (
    <div>
      {console.log(props.instructor)}
      <Row>
        <Col span={19}></Col>
        <Col span={4}>{/*<AddBadge loadData={loadData} />*/}</Col>
        <Col span={1}></Col>
      </Row>
      <br />
      <table className="table table-striped table-sm table-bordered small">
        <thead>
          <tr>
            <th className="w-25">Badge Name</th>
            <th className="w-75">Badge Detail</th>
            <th>Action</th>
          </tr>
        </thead>
        {!loading && (
          <tbody>
            {data.map((data, index) => ({
              /*<SingleBadge data={data} key={index} loadData={loadData} />*/
            }))}
          </tbody>
        )}
      </table>
    </div>
  );
};

Answer 1

There are 2 possible solutions you can implement, one is move loadData function in useEffect but you won't be able to access this function outside useEffect scope:

React.useEffect(() => {
  const loadData = async () => {
    setLoading(true);
    await axios
      .get(
        "http://localhost:4000/api/instructorcourses/" +
          props.instructor.InstructorID
      )
      .then((res) => {
        setData(res.data);
        setLoading(false);
      });
    };

    loadData();
  }, [props.instructor]);

And the other is to wrap loadData in useCallback and add it in the dependencies of useEffect :

const loadData = React.useCallback(async () => {
    setLoading(true);
    await axios
      .get(
        "http://localhost:4000/api/instructorcourses/" +
          props.instructor.InstructorID
      )
      .then((res) => {
        setData(res.data);
        setLoading(false);
      });
  }, [props.instructor]);
React.useEffect(() => {
    loadData();
  }, [loadData]);