Manual Reactive Effect Teardown

Illustrate how to manually stop a reactive effect from running by calling the stop function returned by watchEffect.
// Importing the reactive and watchEffect utilities from Vue or a similar library
import { reactive, watchEffect } from 'vue';

// Define a reactive object
const state = reactive({
    count: 0

// Defining the watchEffect which will be automatically called when the reactive state changes
const stop = watchEffect(() => {
    console.log(`The count is: ${state.count}`);

// Changing the state to trigger the effect

// After some condition or event, we want to stop the effect from running further
setTimeout(() => {
    // Call the stop function to teardown the manual reactive effect
    console.log('Effect has been stopped.');
}, 3000);
This code snippet showcases how to create a reactive state using Vue's reactive function. A watchEffect is initialized to reactively log changes to the 'count' property. The stop function returned from watchEffect is then used to manually teardown the effect after 3 seconds. The reactive effect will stop running any further even if the state changes thereafter.