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
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]);
react-router-dom.StrictMode. move the <StrictMode> tag from index.js to app.js and put it between <Router> and <div>.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.
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]);
