How do you handle cleanup in useEffect?

The cleanup function in useEffect is used to clean up side effects before the component unmounts or before the effect runs again. This prevents memory leaks, stale data, and unexpected behavior.

#### Syntax

     useEffect(() => {
       // Setup code
       
       return () => {
         // Cleanup code
       };
     }, [dependencies]);
     

#### Common Cleanup Scenarios

1. Event Listeners

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

2. Timers and Intervals

     useEffect(() => {
       const intervalId = setInterval(() => {
         setCount(c => c + 1);
       }, 1000);
       
       return () => clearInterval(intervalId);
     }, []);
     

3. Subscriptions

     useEffect(() => {
       const subscription = dataSource.subscribe(handleChange);
       
       return () => subscription.unsubscribe();
     }, [dataSource]);
     

4. Abort Fetch Requests

     useEffect(() => {
       const controller = new AbortController();
       
       fetch(url, { signal: controller.signal })
         .then(response => response.json())
         .then(data => setData(data))
         .catch(err => {
           if (err.name !== 'AbortError') {
             setError(err);
           }
         });
       
       return () => controller.abort();
     }, [url]);
     

When Cleanup Runs:

• Before the component unmounts
• Before re-running the effect when dependencies change