"React Hook useEffect has a missing dependency"

#1

im getting this error. why is it happening and how can i solve this?

React Hook useEffect has a missing dependency: 'getRecipes'. Either include it or remove the dependency array react-hooks/exhaustive-deps

and this is my code:

const App = () => {
     /*....................*/
    useEffect(() => {
        getRecipes();
    }, [query]);

    const getRecipes = async () => {
        const response = await fetch(
            `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
        );
        const data = await response.json();
        setRecipes(data.hits);
        console.log(data.hits);
    }
    /*....................*/
}
#2

Yeah, that’s a weird little rule. I ran into it the other night myself. There is an explanation of it here and a discussion of it here. I will need to read more to understand why they think I need (what is most likely a constant) as a dependency. They’re smart people so I assume there is a reason.

You can shut it up by adding it as a dependency or by shutting off the rule (described in the first link).

#3

Oshikurou - This warning appears when you don’t include a dependency in the useEffect dependency array. In your code, you need to replace “query” with “getRecipes.” The useEffect hook will fire whenever any of the dependencies (items in the array) change. In your case, if the reference to getRecipes changes, useEffect will fire.

#4

He might still want query as a dependency. Especially if getRecipes is an unchanging reference.

#5

yeah, i found the solution. i placed the whole getRecipes function inside useEffect. I just dont understand why i had to put it there in the first place :confused: