const[imageContainer,setImageContainer] = useState([])
const navigate = useNavigate();
useEffect(()=>{
Promise.all([
fetch("https://www.themealdb.com/api/json/v1/1/random.php").then(response=>response.json()),
fetch("https://www.themealdb.com/api/json/v1/1/random.php").then(response=>response.json()),
fetch("https://www.themealdb.com/api/json/v1/1/random.php").then(response=>response.json()),
fetch("https://www.themealdb.com/api/json/v1/1/random.php").then(response=>response.json()),
fetch("https://www.themealdb.com/api/json/v1/1/random.php").then(response=>response.json()),
]).then(response=>setImageContainer(response.map(recipe=>{
return recipe.meals[0]
})))
},[])
Hello, I’m relatively new to React. So far I’ve learned that you should always clean up after using useEffect with the return function to not slow down your application. But I’m not sure how to do that after a fetch call.
2
Answers
Found an answer on the official docs, seems like using ignore flag is the solution
Cleanup in effect is usually for subscriptions (like event handlers), timers or other side-effects; it’s done to prevent memory leaks. However with fetch calls, it’s different. It’s more about cancelling the requests if the component unmounts before the requests are complete to avoid setting the state on an unmounted component.
This is how you should handle fetch request cleanup:
Uses
AbortController
, and its signal is passed to each fetch request.controller.abort();
is executed inside the return function ofuseEffect
.Reffer:
AbortController
useEffects