score:0

Accepted answer

as your useeffect calls getrecipes(); react is indicating that getrecipes is a dependency on this useeffect hook.

you could update with effect with:

useeffect(() => {
    getrecipes();
}, [query, getrecipes]);

however you will get

the 'getrecipes' function makes the dependencies of useeffect hook (at line 18) change on every render. move it inside the useeffect callback. alternatively, wrap the 'getrecipes' definition into its own usecallback() hook. (react-hooks/exhaustive-deps)

so you can update to:

  useeffect(() => {
    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);
    };

    getrecipes();
  }, [query]);

which indicates this effect will be called, when query is modified, which means getrecipes call the api with query.


Related Query

More Query from same tag