missing dependency for React Hook useEffect

Question

hi this is my code: https://codesandbox.io/s/busy-tdd-e8s1ej?file=/src/App.js

for the react-router-dom, I used the ver5.2+.

I couldn't for the life of me figure out the missing dependency, I try searching for answers here but it told me to add me to the dependency to no avail.

I appreciate any enlighten on this issue, thank you

Answer 1

because you're using something that is defined outside of useEffect (in this case fetchProduct function), react will throw a warning saying if something changes inside the fetchProduct function, useEffect will not catch that change. for example: let's say your match.params.id inside fetchProduct is equal to 1 when the page first loaded, but later on match.params.id becomes 2 , the fetchProduct function inside useEffect will still use 1 as match.params.id because useEffect didn't catch the changes.

so to solve the warning, there are 2 options. first is to write the fetchProduct function logic inside useEffect :

useEffect(() => {
  axios
    .get(`https://fakestoreapi.com/products/?id=${match.params.id}`)
    .then((res) => {
      setData(res.data);
      console.log(res.data);
    })
    .catch((err) => console.log(err));
}, [match.params.id]);

having match.params.id in dependency array to make sure useEffect is up to date.

but if you need to reuse the fetchProduct function, then you should do something like:

const fetchProduct = useCallback(() => {
  axios
    .get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
    .then((res) => {
      setData(res.data);
      console.log(res.data);
    })
    .catch((err) => console.log(err));
}, [match.params.id]);

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

Answer 2

It is a warning, Kindly look through the documentation of useEffect()

https://reactjs.org/docs/hooks-effect.html .

Whenever you add in a dependency in the array, it will watch all those values and it will re-run the useEffect hook. whenever that particular value/dependency changes.

https://reactjs.org/docs/hooks-effect.html#:~:text=React%20to%20skip%20applying%20an%20effect%20if%20certain%20values%20haven%E2%80%99t%20changed%20between%20re%2Drenders

Answer 3

You are using the fetchProduct function in your effect, so it is a dependency. The error message should tell you that.

One way to fix it is to move the fetchProduct function inside the effect. Then match will become a dependency of the effect, but you probably want that as if match changes you most likely want to fetch the new product.

useEffect(() => {
  // function fetchProducts
  const fetchProduct = () => {
    axios
      .get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };
  fetchProduct();
}, [match]);