¡Saludos! Tengo problemas con el controller abort y no logro entender que sucede.
Tengo este custom hook, que recibe un metodo (fetch) y lo ejecuta para devulver su respuesta.
#controller abort
mellow vector
Según yo no hay nada raro y debería funcionar sin problemas. de hecho es una técnica que ya antes había hecho y no había tenido problemas hasta ahora.
Estoy usando este hook en un componente Register, pero el bendito coso me ejecuta el cleanup y me aborta el fetch.
celest marten
¡Saludos! Tengo problemas con el controller abort y no logro entender que sucede...
pq haces el fetch en un useEffect?
mellow vector
pq quiero q se ejecute cuando cambie loading
igual donde mas lo haría ? si ocupo el clean up para limpiar el fetch
celest marten
a ver que esta llamando al fetch?
const useFetch = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const abortControllerRef = useRef(null);
const startFetch = useCallback(async (url, options = {}) => {
setLoading(true);
setError(null);
// si hay una peticion anterior la cancelamos
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
// creamos el abortController
abortControllerRef.current = new AbortController();
const signal = abortControllerRef.current.signal;
try {
const response = await fetch(url, { ...options, signal });
if (!response.ok)
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
setData(result);
}catch (err) {
if (err.name === 'AbortError') {
console.log('Fetch cancelado');
} else {
setError(err.message);
}
} finally {
setLoading(false);
}
}, []);
return { startFetch, loading, data, error };
};```igual tiene algun error
esos son los datos del estado el data el loading y el error
el abortcontroller no necesita un estado lo podemos guardar en un useRef asi evitamos un rerender
const { startFetch, loading, data, error } = useFetch();
const handleFetch = () => {
startFetch('https://pokeapi.com/api/v2');
};```si tu fetch es en respuesta a un evento de usuario simplemente haces el fetch
si tu fetch es al cambiar un dato en otro componente ya tienes 2 sifeEffect encadenados
lo que no es necesario
tienes que intentar dejar de usar el useEffect te va a complicar el codigo
se entiende?
mellow vector
mk si te soy franco, me parece q te complicaste vos. pero bue capaz no lo veo
celest marten
el useEffect es por ejemplo cuando llega un prop a un componente y tu componente tiene que ejecutar algo
fading star
Si tan solo la gente usara react query, uno no viera tanto intento de replicar lo que ya lo que hace esa lib 🫠
celest marten
Yo uso server componente y server action no uso react query xD
mellow vector
@fading star q hay bro. tiempo sin verte
fading star
<@566724080254976030> q hay bro. tiempo sin verte
Todo bien
mellow vector
podes entrar a voz? a ver si sacas del lio ? xD llevo ya 28horas y no logro encontrar el problema
fading star
Dame unos 15 minutos
mellow vector
ok.
la vd odio React... siempre una mrd sale... he aplicado la misma tecnica varias veces y nunca había tenido problemas con el clean up hasta hoy
fading star
Pero repito, si usarás react query, te evitas montones de dolores de cabeza
mellow vector
lo uso, pero para cosas GET, no para post
en otro proyecto. hice exactamente lo mismo y andaba fino...
fading star
Eso que pasas funciona porque la mayoría de funciones que llamas en el useEffect son estables
Están pensadas para ser estables
Pero tu hook, recibe un callback que cambia cada vez y eso usarlo o pasarlo a un useEffect es un complique
mellow vector
lo quitaría de las dependencias y ya, pero el fetch q estoy pasando es el mismo sin importar el render
y se supoen al ser un custom hook, solo lo init la primera vez.
fading star
Y si haces un post, no se hasta que punto tiene sentido el aborto Controller
Me parece que leí que se usa es más para los get
mellow vector
bueno. a mi me enseñaron q siempre se pone un abort. y justamente es para controlar los fetch en casos de desmontado y muerte del componente...
fading star
El diccionario del teléfono escribe lo que le da la gana 😝
mellow vector
imagina q dar click en registrarse y luego se van a otra vista.. ahí deberia morir el fetch si no se ha resuelto, por eso se pone el abort controller
el clean se ejecuta cada q muere. pero tambien cada q hay re-render
fading star
Para un get está bien, pero si es un post, put, etc puedes hacer que un proceso quede incompleto en el server...
mellow vector
primer render. ejecutando fetch.... segundo re-render y aun no se ha solucionado el fetch de antes, clean entra y lo mata y continua con el del rneder aactual
celest marten
imagina q dar click en registrarse y luego se van a otra vista.. ahí deberia mo...
el abort controller no se pone solo por si te vas a otro component lo lanzas para si haces una segunda peticion la primera puede llegar mas tarde que la segunda lo que haria que pillaras los datos incorrectos
mellow vector
el abort controller no se pone solo por si te vas a otro component lo lanzas par...
por eso. y eso es posible en cualqueir fetch.
según mi profe e incluso el midudev. q yo le veo sentido, ningun fetch debería ejecutarse fuera de un useEffect y justamente pq no existe otro lugar donde puedas usar el clean up
celest marten
tu profesor no tiene ni idea
mellow vector
pq perfectamente un fetch se puede hacer donde nos de la gana. pero solo en un efecto se puede limpiar
mellow vector
bue xD. para mi si es verdad pq lo he probado no es dificil de ver usando las devtools
celest marten
un useEffect es un sideEffect
algo cambia y necesitas reaccionar a dicho cambio
el problema es que necesitas guardar el abortController
y el useEffect lo preserva
pero tu puedes guardarlo en un useRef
la gente se cree que useRef es par pillar elementos del dom
mellow vector
mk pero para q usar ref si ya exxiste clean up ? q sabe el contexto del render anterior ?
celest marten
es para guardar cualquier cosa sin provocar rerender
mellow vector
ademas usas un callback y estados separados, complicando el code
celest marten
imaginate que te subscribes al loading
pq necesitas que un componente escuhe el estado si no lo va a consumir?
mellow vector
si q lo hará. por qué no lo haría ? cualquier q haga un fetch ocupa saber si está loading
asi sabe q pintar en base al mismo
celest marten
a ver imaginate un input con un boton para mandar
dicho boton llama la peticion y muestra en el boton loading
los resultados aparecen en otro componente
pq necesito saber los datos en ese componente?
hay cosas que si que es mejor en un estado pero hay datos que no
mellow vector
porque ocupas pintar un spinner por ejemplo en base al estado del fetch
mellow vector
porque puedes ocupar disabilitar un btn del submit si ya está en fetching
mellow vector
entre otras miles de cosas. a veces te apetece mostrar un modal incluso cuando ya terminó el fetch
fading star
ya estoy
mellow vector
de hecho tanStackQuery, te da un isLoading isErr justamente pq el q consume necesita esos estados
celest marten
lo que te digo es que no des por sentado cosas como que los datos el loading el error etc son todos el mismo estado
el error saldria en un toast
si no hay error pq voy a disparar efectos en el toast?
mellow vector
y tanStackQuery te pide un signal pq sabe q ocupa manejar el control del fetch q se haga
es q se peuden tener separados los estados, pero si 2 de esos estados cambian en una misma accion react hace 2 render
celest marten
no uso react query pq uso server components
mellow vector
pero si los tienes en 1 solo estado y en una accion cambian react solo hace 1 render pq son el mismo estado
fading star
y tanStackQuery te pide un signal pq sabe q ocupa manejar el control del fetch q...
pero solo para los queries, (get) no para las mutaciones
mellow vector
es q tanStackQuery según lei en la doc o mencionan, solo sirve para get. pero bue capaz me equivoco
fading star
nooooo
sirve para get y para mutar (post, put, delete)
de hecho es su mayor virtud, mantiene sincronizado todo cuando haces mutaciones
celest marten
pero si los tienes en 1 solo estado y en una accion cambian react solo hace 1 re...
Quien te ha dicho eso?
mellow vector
es facil de probar con console.log xd
celest marten
adelante
mellow vector
bue.
fading star
en react 18, los estados se actualizan en "batch"
fading star
lo que quiere decir que si en un proceso cambias varios de ellos, al final solo se ejecuta un render
celest marten
batching de updates
fading star
pero bueno, ya estoy por si vamos a ir a una sala o que
mellow vector
pero bueno, ya estoy por si vamos a ir a una sala o que
vale. cual entro ?
celest marten
handling events si algo ocurre a raiz de un evento nada de useEffect si el evento esta en el mismo componente o se usa un customHook lo llamas directamente
fading star
sala 3