Siempre he sentido que tengo una comprensión bastante sólida de cómo funcionan los cierres de JS, pero desde que usé ReactJS durante los últimos meses hay algo que no puedo entender.
En el siguiente ejemplo, ¿el objeto de resultado de la consulta getData estará obsoleto si se usa en la devolución de llamada exitosa para la otra consulta?
Mis instintos de cierre me dicen que sí, pero mis instintos de reacción me dicen que no por alguna razón y no puedo entender por qué funciona de la manera que lo hace.
¡Toda ayuda es apreciada!
/* * Custom query hooks */ function useGetData(someId, opts){ return useQuery(['getData', someId], getDataQueryFn, { ...opts, }, ); } function useOtherData(someId, opts){ return useQuery(['otherData', someId], otherDataQueryFn, { ...opts, }, ); } /* * React component */ function MyComponent(){ const getData = useGetData("1"); const otherData = useOtherData("1", { onSuccess: () => { // QUESTION: if I use getData here, won't it be stale due to closure? why or why not? } }); // render and stuff... }Depende de la implementación de useQuery . Sin embargo, estoy bastante seguro de que no usará datos obsoletos. Espero el siguiente orden:
useGetData , se vuelve a procesar debido a alguna actualización de estado internouseOtherData y la biblioteca la recoge para manejar la próxima actualizaciónNo se vuelve rancio. Aquí hay una caja de códigos que se cierra sobre un mostrador y la búsqueda necesita 5 segundos para completarse. código relevante de la caja de arena:
const [count, inc] = React.useReducer((val) => val + 1, 0); const { data } = useQuery( "repoData", async () => { await waitFor(5000); return Promise.resolve({ name: "foo " }); }, { onSuccess: () => console.log(count) } );si hace clic en el contador un par de veces en los primeros 5 segundos, aún se registrará el último recuento. Realmente no importa si cierra sobre el estado local o sobre alguna otra consulta.
Es probable que la razón sea que react-query solo activará una nueva representación después de que la Promesa sea exitosa (es una simple representación forzada a través de useState bajo el capó), y en ese momento, la reacción ya "ve" el valor más reciente, no el valor desde el momento en que la consulta comenzó a buscar.