Snippet

Managing Asynchronous Timers and Cleanup with useEffect

Asynchronous tasks like setTimeout inside useEffect must be paired with a cleanup function. Returning a cleanup function prevents memory leaks and stale state updates if the component unmounts before the timer finishes.

snippet.js

javascript

import React, { useState, useEffect } from 'react';
 
function DelayedNotice() {
  const [isVisible, setIsVisible] = useState(false);
 
  useEffect(() => {
    const timerId = setTimeout(() => {
      setIsVisible(true);
    }, 3000);
 
    return () => clearTimeout(timerId);
  }, []);
 
  return <div>{isVisible && <p>Notice: Session active!</p>}</div>;
}
 
export default DelayedNotice;

react

Breakdown

const timerId = setTimeout(() => { setIsVisible(true); }, 3000);

Schedules an asynchronous state update to run after 3000 milliseconds.

return () => clearTimeout(timerId);

Returns a cleanup function to cancel the pending timer if the component unmounts.

}, []);

Passes an empty dependency array so the effect runs only once after the initial render.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Managing Asynchronous Timers and Cleanup with useEffect

Related