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> ); }(Puedo eliminar getUser de la dependencia useEffect y eliminar useCallback también, esto funcionará perfectamente) pero quiero intentar poner getUser en la dependencia useEffect y, al hacerlo, necesito envolver getUser en useCallback. en la dependencia de useCallback, puse setUser, funciona bien, pero en caso de poner al usuario como dependencia de useCallback, obtengo un bucle infinito. por qué no se comporta igual que setUser.
El efecto se ejecutará si getUser cambia:
useEffect(() => { //... }, [getUser]); Y getUser cambiará si user cambia:
const getUser = useCallback(async () => { //... }, [user]); Y getUser cambia de user :
setUser(data); Entonces, cuando el componente se procesa, se ejecuta el efecto, que llama a getUser , que actualiza user , que cambia getUser , que activa el efecto, que llama a getUser , etc., etc.
useCallback para getUser no depende del user , solo de setUser . Cambie su matriz de dependencia para reflejar eso:
const getUser = useCallback(async () => { //... }, [setUser]); setUser no cambia, por lo que getUser no cambiará, por lo que el efecto no se volverá a invocar.