1

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 )

persius singh
  • 23
  • 1
  • 5

1 Answers1

4

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.

Phoenix1355
  • 1,589
  • 11
  • 16
  • nope, becuase the `get` is defined inside the component, and so it will be a new one on each re-render, causing an infinite loop. – Gabriele Petrioli Jun 09 '21 at 09:39
  • It is still dependent on the method regardless. If he wants to prevent a re-render each time, he should wrap the `get()` method in a `React.useCallback` – Phoenix1355 Jun 09 '21 at 09:41
  • now i'm getting this error - ( The 'get' function makes the dependencies of useEffect Hook (at line 19) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'get' in its own useCallback() Hook ) @Phoenix – persius singh Jun 09 '21 at 09:42
  • @persiussingh I edited my answer to use the useCallback too – Phoenix1355 Jun 09 '21 at 09:46
  • Another possible solution could also be to move the functionality of `get()` inside the `useEffect` entirely. Unless you need to use the `get()` method again, you don't need to wrap it in a function. – Phoenix1355 Jun 09 '21 at 09:49
  • @Phoenix1355 now getting ( React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies? ) – persius singh Jun 09 '21 at 09:50
  • @persiussingh Remember to pass the `[]` as the last argument of the `useCallback` – Phoenix1355 Jun 09 '21 at 09:53
  • @Phoenix1355 now getting ( React Hook useCallback has a missing dependency: 'Id'. Either include it or remove the dependency array ) I updated my code – persius singh Jun 09 '21 at 10:02
  • Ah, well that's the same solution as with `get`. Just add `id` to the dependency array for `useCallback` so it the last argument is `[id]` – Phoenix1355 Jun 09 '21 at 10:09