How to get rid of missing dependency warning of useEffect in React - react-hooks

Question

import { useEffect, useState } from "react";
const useSPices = () => {
const [spices, setSpices] = useState([])
useEffect(() => {
fetch("http://localhost:5000/spices")
.then(res => res.json())
.then(data => setSpices(data))
});
return [spices, setSpices];
}
export default useSPices;

Answer 1

Dependency array tells useEffect when to run:
useEffect(() => {
// do smth
}, [var1, var2 ...]);
Whenever any of the variables in that array (var1 and so on) change, it causes the code inside the useEffect to execute. If you dont supply this array, the useEffect executes its code on every render.
You could do something like this:
function MyFetch(url) {
const [data, setData] = useState();
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return [data];
}
And then you can use it like this:
export default function App() {
const data = MyFetch("https://jsonplaceholder.typicode.com/todos/1");
console.log(data[0]);
return (
<div>
{Object.keys(data[0]).map((key) => (
<div>
{key} - {data[0][key] + ""}
</div>
))}
</div>
);
}
useEffect is a tricky one to be honest with you. useEffect runs after every render (since you have no dependency array), and setState causes a re-render, so you have to be a bit careful when setting state from inside useEffect. Currently, in your code, what happens is:
useEffect runs
setState is executed, which causes a re-render
useEffect runs again because of the re-render
To avoid this, don't update things from inside the useEffect that would trigger the useEffect to re-run.
Here's the sandbox link: https://codesandbox.io/s/determined-goldstine-jx1r81?file=/src/App.js:280-567
I see that you are returning the setSpices function, what is your goal? If you want useSpices to be a function for fetching stuff asynchronously, the returning just the spices will be enough, but I can't think of a reason of why you might want to return the setSpices function as well.