Hola a todos soy nuevo en react-hook tengo algunas dudas sobre el metodo de llamada useEffect
1 . Tengo un problema de advertencia. Reaccionar Hook useEffect tiene una dependencia faltante "obtener datos". Inclúyalo o elimine la matriz de dependencias react-hooks/exhaustive-deps Resolví ese problema usando esta línea de comando // eslint-disable-next-line react-hooks/exhaustive-deps, si estoy haciendo esto correctamente o no si se produce algún problema en el futuro servidor de producción.
Gracias por la ayuda
const [user,setUser]=useState([]); const [post,setPost]=useState([]); const UserList =()=>{ axios.get("https://jsonplaceholder.typicode.com/users") .then((res)=>{ setUser(res.data) }) } const PostList =()=>{ axios.get("https://jsonplaceholder.typicode.com/post") .then((res)=>{ setPost(res.data) }) } useEffect (()=>{ PostList(); UserList(); },[])Sus llamadas a la API no son asíncronas, por lo que el estado no se actualiza hasta que se completa la llamada a la API, pero los componentes se representan en la pantalla, lo que depende de los valores del estado. Haga que sus llamadas API sean asíncronas.
Las fugas de memoria ocurren cuando intenta establecer un estado después de que se desmonta su componente y esto sucede a menudo cuando establece su estado en funciones asíncronas/promesa.
Una solución que he estado usando durante un tiempo es iniciar un componente externo variable y verificar esa variable antes de actualizar su estado.
let isMounted = true; const YourComponent = () => { const UserList = () => { axios.get("https://jsonplaceholder.typicode.com/users") .then((res)=>{ if(isMounted){ setUser(res.data) } }) } useEffect(() => { UserList(); return () => { isMounted = false; } }, []} }después de obtener datos, necesita la función de limpieza. UseEffect(callback, deps) le permite limpiar fácilmente los efectos secundarios. Cuando la función de devolución de llamada devuelve una función, React la usará como una función de limpieza
useEffect(() => { let controller = new AbortController(); (async () => { try { //fetch } catch (e) { // Handle fetch error } })(); return () => controller?.abort(); }, []);obviamente esta es una opción de cómo puedes lidiar con eso