Effective scope for cleanup in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens to the cleanup function in this Vue 3 component?

Consider this Vue 3 component using the Composition API. What will happen when the component unmounts?

Vue

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      const interval = setInterval(() => {
        count.value++;
      }, 1000);

      onUnmounted(() => {
        clearInterval(interval);
      });
    });

    return { count };
  }
}

A The component will throw an error because onUnmounted cannot be called inside onMounted.

B The interval will be cleared properly when the component unmounts, stopping the count increment.

C The interval will never be cleared because onUnmounted is nested inside onMounted, so cleanup won't run.

D The count will reset to zero when the component unmounts due to the cleanup function.

💡 Hint

Think about when lifecycle hooks run and if nesting affects their execution.

In Vue 3, lifecycle hooks like onUnmounted can be called inside onMounted. The cleanup function registered with onUnmounted will run when the component unmounts, clearing the interval properly.

❓ lifecycle

intermediate

When is the cleanup function called in Vue 3's watchEffect?

In Vue 3, watchEffect can return a cleanup function. When exactly is this cleanup function executed?

Vue

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect((onCleanup) => {
      console.log('Effect runs with count:', count.value);

      onCleanup(() => {
        console.log('Cleanup for count:', count.value);
      });
    });

    return { count };
  }
}

A The cleanup function runs after the effect runs each time.

B The cleanup function runs only once when the component unmounts.

C The cleanup function runs before the effect re-runs and when the component unmounts.

D The cleanup function runs only if the watched value changes to null.

💡 Hint

Think about how watchEffect manages reactive dependencies and cleanup.

The cleanup function in watchEffect runs before the effect re-runs to clean up previous side effects, and also when the component unmounts to avoid memory leaks.

🔧 Debug

advanced

Why does this Vue 3 cleanup function not run on unmount?

Examine the code below. Why does the cleanup function not execute when the component unmounts?

Vue

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const timer = ref(null);

    onMounted(() => {
      timer.value = setTimeout(() => {
        console.log('Timer done');
      }, 1000);
    });

    onUnmounted(() => {
      clearTimeout(timer.value);
    });

    return {};
  }
}

A Because setTimeout inside onMounted delays the cleanup registration until after unmount.

B Because onUnmounted is not imported from 'vue', so the hook never runs.

C Because the timer variable is declared with ref, which is not reactive enough for cleanup.

D Because clearTimeout is called with a ref object instead of the timer ID, so the timeout is not cleared.

💡 Hint

Check the argument passed to clearTimeout carefully.

The timer is a ref object, so timer itself is an object, not the timer ID. The correct call should be clearTimeout(timer.value) to clear the actual timer.

📝 Syntax

advanced

Which option correctly registers a cleanup function in Vue 3's onMounted hook?

Choose the code snippet that correctly registers a cleanup function to run when the component unmounts.

A

onMounted(() => {
  const id = setInterval(() => {}, 1000);
  onUnmounted(() => clearInterval(id));
});

B

onMounted(() => {
  const id = setInterval(() => {}, 1000);
  return () => clearInterval(id);
});

C

onMounted(() => {
  const id = setInterval(() => {}, 1000);
  onCleanup(() => clearInterval(id));
});

D

onMounted(() => {
  const id = setInterval(() => {}, 1000);
  cleanup(() => clearInterval(id));
});

💡 Hint

Remember the correct lifecycle hook for cleanup in Vue 3.

In Vue 3, onUnmounted is the correct hook to register cleanup functions. Returning a function from onMounted or using onCleanup or cleanup are not valid Vue 3 APIs.

🧠 Conceptual

expert

Why is it important to scope cleanup functions inside the setup function in Vue 3?

In Vue 3's Composition API, why should cleanup functions be registered inside the setup() function rather than outside it?

A Because cleanup functions registered inside <code>setup()</code> are tied to the component instance lifecycle, ensuring proper cleanup on unmount.

B Because registering cleanup outside <code>setup()</code> causes Vue to run cleanup multiple times per component instance.

C Because Vue only allows cleanup functions inside <code>setup()</code> to access reactive state variables.

D Because cleanup functions outside <code>setup()</code> run immediately when the component mounts, not on unmount.

💡 Hint

Think about how Vue tracks component lifecycles and reactive scopes.

Cleanup functions must be registered inside setup() so they are linked to the component's lifecycle. This ensures cleanup runs exactly when the component unmounts, preventing memory leaks and stale effects.

Practice

1. In Vue, which lifecycle hook is best to use for cleaning up timers or event listeners when a component is removed?

easy

A. onUpdated

B. onMounted

C. onUnmounted

D. onCreated

Solution

1. Step 1: Understand Vue lifecycle hooks

   onMounted runs when the component appears, onUnmounted runs when it disappears.

2. Step 2: Identify cleanup timing

   Cleanup like stopping timers or removing listeners should happen when the component is removed, so onUnmounted is the right hook.

3. Final Answer:

   onUnmounted -> Option C

4. Quick Check:

   Cleanup runs on unmount = C [OK]

Hint: Cleanup always goes in onUnmounted hook [OK]

Common Mistakes:

• Using onMounted for cleanup
• Confusing onUpdated with cleanup
• Trying to cleanup in onCreated

2. Which of the following is the correct syntax to register a cleanup function in Vue's setup() using the onUnmounted hook?

easy

A. onUnmounted(() => { clearInterval(timer) })

B. onUnmounted = () => { clearInterval(timer) }

C. onUnmounted.clear(() => { clearInterval(timer) })

D. onUnmounted.clearInterval(timer)

Solution

1. Step 1: Recall Vue hook syntax

   Vue lifecycle hooks like onUnmounted are functions that take a callback to run on that event.

2. Step 2: Match correct syntax

   The correct way is calling onUnmounted with a function: onUnmounted(() => { ... }). Other options misuse assignment or methods.

3. Final Answer:

   onUnmounted(() => { clearInterval(timer) }) -> Option A

4. Quick Check:

   Hook usage = function call with callback [OK]

Hint: Hooks are called with a function, not assigned [OK]

Common Mistakes:

• Assigning instead of calling onUnmounted
• Using nonexistent methods on onUnmounted
• Missing arrow function wrapper

3. What will be the console output when this Vue component unmounts?

setup() {
  const timer = setInterval(() => console.log('tick'), 1000)
  onUnmounted(() => clearInterval(timer))
}

medium

A. Logs 'tick' only once when component unmounts

B. Logs 'tick' every second until component unmounts, then stops

C. No logs appear at all

D. Throws an error on unmount

Solution

1. Step 1: Understand setInterval behavior

   setInterval logs 'tick' every 1000ms continuously until cleared.

2. Step 2: Analyze cleanup with onUnmounted

   When the component unmounts, clearInterval(timer) stops the interval, so logging stops after unmount.

3. Final Answer:

   Logs 'tick' every second until component unmounts, then stops -> Option B

4. Quick Check:

   Interval runs until cleared on unmount [OK]

Hint: Intervals run until cleared in onUnmounted [OK]

Common Mistakes:

• Thinking logs stop immediately without unmount
• Expecting logs only once on unmount
• Assuming error on clearInterval

4. Identify the problem in this Vue setup function and how to fix it:

setup() {
  const timer = setInterval(() => console.log('tick'), 1000)
  onMounted(() => clearInterval(timer))
}

medium

A. Cleanup runs too early; should use onUnmounted instead

B. Timer is never created; setInterval is missing

C. clearInterval is called without timer variable

D. No problem; code works correctly

Solution

1. Step 1: Check when cleanup runs

   Using onMounted to clear interval means it stops immediately after mounting, so no ticks happen.

2. Step 2: Correct cleanup timing

   Cleanup should happen when component unmounts, so onUnmounted is the correct hook to clear the timer.

3. Final Answer:

   Cleanup runs too early; should use onUnmounted instead -> Option A

4. Quick Check:

   Cleanup must be on unmount, not mount [OK]

Hint: Cleanup belongs in onUnmounted, not onMounted [OK]

Common Mistakes:

• Clearing timer on mount instead of unmount
• Assuming onMounted is for cleanup
• Ignoring lifecycle hook purpose

5. You have a Vue component that subscribes to a WebSocket in setup(). Which pattern correctly ensures the subscription is cleaned up only when the component unmounts?

setup() {
  const socket = new WebSocket('wss://example.com')
  socket.onmessage = (event) => console.log(event.data)
  // What cleanup code and where?
}

hard

A. Call socket.close() immediately after creating socket

B. No cleanup needed for WebSocket in Vue

C. Use onMounted(() => socket.close()) to close socket on mount

D. Use onUnmounted(() => socket.close()) inside setup

Solution

1. Step 1: Understand WebSocket lifecycle

   WebSocket stays open until closed; closing it too early stops messages.

2. Step 2: Place cleanup in onUnmounted

   To avoid leaks, close the socket when component unmounts using onUnmounted(() => socket.close()).

3. Final Answer:

   Use onUnmounted(() => socket.close()) inside setup -> Option D

4. Quick Check:

   Cleanup subscriptions on unmount with onUnmounted [OK]

Hint: Close subscriptions in onUnmounted hook [OK]

Common Mistakes:

• Closing socket immediately after creation
• Closing socket on mount instead of unmount
• Skipping cleanup causing memory leaks