Cleanup function in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a cleanup function inside useEffect.

React

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello');
  }, 1000);

  return [1];
}, []);

Drag options to blanks, or click blank then click option'

AclearTimeout(timer)

B() => clearTimeout(timer)

C() => setTimeout(timer)

DclearInterval(timer)

Attempts:

3 left

💡 Hint

Common Mistakes

Returning clearTimeout(timer) directly instead of a function.

Using clearInterval instead of clearTimeout.

The cleanup function must be a function that clears the timeout using clearTimeout(timer). So we return a function () => clearTimeout(timer).

2fill in blank

medium

Complete the code to clean up an event listener in useEffect.

React

useEffect(() => {
  function onResize() {
    console.log('Resized');
  }
  window.addEventListener('resize', onResize);

  return [1];
}, []);

Drag options to blanks, or click blank then click option'

Awindow.removeEventListener('resize', onResize)

Bwindow.addEventListener('resize', onResize)

C() => window.removeEventListener('resize', onResize)

D() => window.addEventListener('resize', onResize)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling removeEventListener directly instead of returning a function.

Adding the event listener again in cleanup.

The cleanup function must remove the event listener by returning a function that calls window.removeEventListener('resize', onResize).

3fill in blank

hard

Fix the error in the cleanup function that clears an interval.

React

useEffect(() => {
  const id = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return [1];
}, []);

Drag options to blanks, or click blank then click option'

A() => clearInterval(id)

BclearInterval(id)

C() => clearTimeout(id)

DclearTimeout(id)

Attempts:

3 left

💡 Hint

Common Mistakes

Returning clearInterval(id) directly instead of a function.

Using clearTimeout instead of clearInterval.

The cleanup function must be a function that calls clearInterval(id). Returning clearInterval(id) directly causes an error because cleanup must be a function.

4fill in blank

hard

Fill both blanks to add and clean up a window scroll event listener.

React

useEffect(() => {
  function handleScroll() {
    console.log('Scrolled');
  }
  window.[1]('scroll', handleScroll);

  return () => {
    window.[2]('scroll', handleScroll);
  };
}, []);

Drag options to blanks, or click blank then click option'

AaddEventListener

BremoveEventListener

CattachEvent

DdetachEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using attachEvent or detachEvent which are old and not standard.

Mixing addEventListener and removeEventListener incorrectly.

We add the event listener with addEventListener and clean it up with removeEventListener.

5fill in blank

hard

Fill all three blanks to create a cleanup function that cancels a subscription and clears a timeout.

React

useEffect(() => {
  const subscription = api.subscribe();
  const timeoutId = setTimeout(() => {
    console.log('Timeout done');
  }, 2000);

  return () => {
    subscription.[1]();
    clearTimeout([2]);
    console.log([3]);
  };
}, []);

Drag options to blanks, or click blank then click option'

Aunsubscribe

BtimeoutId

C'Cleanup complete'

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe instead of unsubscribe.

Using wrong variable name for timeout.

Not returning a function for cleanup.

The cleanup calls subscription.unsubscribe(), clears the timeout with clearTimeout(timeoutId), and logs a message.