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 )

Do you want the get to run again if the id prop changes ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Jun 9, 2021 at 9:38

Phoenix1355 · Accepted Answer · 2021-06-09 09:46:07Z

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.

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.
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
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
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.

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related