import axios from "axios";
import { useEffect, useState, useCallback } from "react";
export default function App() {
const [user, setUser] = useState([]);
const getUser = useCallback(async () => {
let { data } = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
setUser(data);
}, [user]);
useEffect(() => {
getUser();
}, [getUser]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
(i can remove getUser from useEffect dependency and remove useCallback as well this will work perfectly) but i wanna try putting getUser in useEffect dependency and while doing so need to wrap getUser in useCallback. in useCallback dependency, i put setUser it work fine but incase of putting user as useCallback dependency m getting infinite loop. why is not behaving same as setUser.
The effect will run if getUser changes:
useEffect(() => {
//...
}, [getUser]);
And getUser will change if user changes:
const getUser = useCallback(async () => {
//...
}, [user]);
And getUser changes user:
setUser(data);
So when the component renders, the effect executes, which calls getUser, which updates user, which changes getUser, which triggers the effect, which calls getUser, etc., etc.
The useCallback for getUser has no dependency on user, only on setUser. Change its dependency array to reflect that:
const getUser = useCallback(async () => {
//...
}, [setUser]);
setUser doesn't change, so getUser won't change, so the effect won't be re-invoked.