React Hook useCallback has a missing dependency: 'Id'. Either include it or remove the dependency array [duplicate]

Question

I am getting this error ( React Hook useCallback has a missing dependency: 'Id'. Either include it or remove the dependency array ) and don't know how to resolve it ,

import React, { useEffect, useState, useCallback } from "react";
import { Link } from "react-router-dom";

const Sports = (props) => {
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [sport, setSport] = useState([]);
  const get = useCallback(async () => {
    const res = await fetch(
      URL +
        Id
    );
    const response = await res.json();
    setSport(response);
    // console.log(response);
  }, [sport]);
  useEffect(() => {
    get();
  }, [get]);

  return (
    <div>
      <ul>
        {sport.map((currentElement, index) => {
          return (
            <li key={index}>
              <Link to={"/" + Id + "/" + currentElement.competition.id}>
                <p>{currentElement.competition.name}</p>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Sports;

I did this to ...!

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Sports = (props) => {
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [sport, setSport] = useState([]);

  useEffect(() => {
    const get = async () => {
      const res = await fetch(
        "http://51.143.173.5/api/developer/matchapi.php?Action=listCompetitions&EventTypeID=" +
          Id
      );
      const response = await res.json();
      setSport(response);
      // console.log(response);
    };
    get();
  }, []);
  return (
    <div>
      <ul>
        {sport.map((currentElement, index) => {
          return (
            <li key={index}>
              <Link to={"/" + Id + "/" + currentElement.competition.id}>
                <p>{currentElement.competition.name}</p>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Sports;

getting this error - (React Hook useEffect has a missing dependency: 'Id'. Either include it or remove the dependency array )

Answer 1

useEffect and some other hooks need a dependency array provided. It's the last argument passed as an array. The dependencies tell the hooks which variables or elements to observe for changes. If a dependency changes, the hook should also expect a new behavior and will therefor update.

To fix your issue, you need to provide the get() method in your dependency array as the warning states like so:

const get = useCallback(async () => {
  const res = await fetch(
    URL +
      Id
  );
  const response = await res.json();
  setSport(response);
}, []);

useEffect(() => {
  get();
}, [get]);

This will tell the hook that it should expect a different behavior if the get() method should change. It doesn't really have any sufficient impact in your case, but it can in other cases be used as a function that runs every time a variable changes or so.