Reactjs - Cleanup function after a fetch call in React

Duka93
January 17, 2024
210 views
1 vote
2 Answers

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.

Answers

Chosen as BEST ANSWER
- Duka93
- January 17, 2024 at 4:16 pm
- 0 votes
0
Found an answer on the official docs, seems like using ignore flag is the solution

(Edit)

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:

useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    Promise.all([
        fetch("https://www.themealdb.com/api/json/v1/1/random.php", { signal }).then(response => response.json()),
        fetch("https://www.themealdb.com/api/json/v1/1/random.php", { signal }).then(response => response.json()),
        fetch("https://www.themealdb.com/api/json/v1/1/random.php", { signal }).then(response => response.json()),
        fetch("https://www.themealdb.com/api/json/v1/1/random.php", { signal }).then(response => response.json()),
        fetch("https://www.themealdb.com/api/json/v1/1/random.php", { signal }).then(response => response.json()),
    ]).then(response => setImageContainer(response.map(recipe => recipe.meals[0])))
     .catch(error => {
         if (error.name === 'AbortError') {
             console.log('Fetch aborted');
         } else {
             console.error('Fetch error:', error);
         }
     });

    return () => {
        controller.abort(); // This will cancel the fetch requests when the component unmounts
    };
}, []);

Uses AbortController, and its signal is passed to each fetch request. controller.abort(); is executed inside the return function of useEffect.

Reactjs – Cleanup function after a fetch call in React

Answers