Preventing Memory Leaks with Effect Cleanup

Snippet

Preventing Memory Leaks with Effect Cleanup

Returning a function from useEffect allows you to clean up subscriptions or event listeners before the component unmounts or before the effect runs again.

snippet.js

javascript

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);
 
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

react

Breakdown

return () => { ... }

This is the cleanup function that React executes when the component unmounts.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Preventing Memory Leaks with Effect Cleanup

Related