En React 18, hay mount -> unmount -> mount en modo estricto por varias razones. Estoy tratando de colocar una llamada a la API en el useEffect y estoy tratando de averiguar cuál es la mejor manera de escribir una limpieza de modo que la llamada a la API no se active nuevamente cuando se vuelva a montar.
function componentName(){ useEffect(() => { fetchCall(); // Want to call this once },[]); return(<div></div>) }El uso de un estado de nivel de componente para verificar si se realizó una llamada no funciona, porque el estado no se actualiza en este proceso.
const [isLoading, setIsLoading] = useState(true); useEffect(() => { async function fetchData(){ setIsLoading(false); const apiResponse = await getAPI(); //gets called twice } if(isLoading){ fetchData(); } },[])No quiero usar algún AbortController para abortar la llamada anterior porque eso es feo. No puedo entender cómo decir en el proceso de montaje que se ha realizado esta llamada. Al principio, pensé que tal vez había alguna condición de carrera entre la actualización del estado y la solicitud de la API, pero el estado se establece antes de esperar la respuesta de la API.
Básicamente, ¿cuál es la forma ideal de garantizar que la llamada se active solo una vez? Encontré soluciones como usar un caché en el medio o usar react-query o simplemente decir que se elimine el modo estricto, pero tiene que haber una forma limpia de hacerlo.
Mis 2 centavos:
Crea un gancho personalizado:
function useEffectively(fnToRun, deps = []) { const refRanOnce = useRef(false); const refDeps = useRef(deps); useEffect(() => { let cleanup; const depsChanged = !isEqual(refDeps.current, deps); // isEqual can be a custom code or import it from lodash if (!refRanOnce.current || depsChanged) { refRanOnce.current = true; refDeps.current = deps; cleanup = fnToRun(); } return () => { // you may reset refRanOnce.current to false here, if required cleanup?.(); // clean up for the function that you may pass, if it exists } }, deps); }Este enlace personalizado se activará cuando las dependencias realmente cambien entre renderizaciones o en el momento del montaje inicial.
Ahora use este enlace personalizado para llamadas a API:
useEffectively(fetchCall) // add dependencies if requiredEs posible que NO cubra todos sus casos de uso, pero puede modificarlo según sus necesidades.