The key to cleaning side effects in Vue or React is to actively clear the component when it is uninstalled or depends on changes to avoid memory leaks. Common operations that need to be cleaned include timers, event listening, asynchronous requests, etc.; Vue 2/3 is cleaned through beforeUnmount or onBeforeUnmount lifecycle hooks; React is implemented through the cleaning function returned by useEffect, which can be performed when component is uninstalled, and can also trigger cleaning when dependencies change; in addition, you need to pay attention to dependency settings, repeated cleaning and resource release of third-party libraries, such as using AbortController to cancel the request.

In component lifecycle-based frameworks like Vue or React, side effects are key to avoiding memory leaks and improving application performance. Failure to deal with side effects may lead to problems such as old data residues, continuous timer operation, and unreleased event listening. The correct approach is to actively clear the previous operation when the component is uninstalled or the dependency changes .

Basic timing for cleaning up side effects

Side effects usually occur during component mounting or update stages, such as initiating asynchronous requests, setting timers, binding events, etc.
If these operations are not cleaned up in time, they may continue to be executed after the component is uninstalled, causing errors or even crashes.

Common situations that require cleaning include:

• Use setTimeout / setInterval
• Subscription events (such as window resize, WebSocket)
• Asynchronous request is not completed but component is uninstalled
• Manually added DOM elements or listeners

There are generally two times to clean up:

• Before component uninstallation (Vue's beforeUnmount , React's useEffect return function)
• When some dependencies change (cleaning is triggered by dependency array in React)

How to clean up side effects in Vue

In the Vue 2 and Vue 3 option APIs, you can clean up through the beforeUnmount lifecycle hook.

For example, you set a timer in a component:

 export default {
  mounted() {
    this.timer = setInterval(() => {
      console.log('tick');
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  }
}

If you are using Vue 3's combined API (setup), you can use onBeforeUnmount :

 import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    const timer = setInterval(() => {
      console.log('tick');
    }, 1000);

    onBeforeUnmount(() => {
      clearInterval(timer);
    });
  }
}

How to clean up side effects in React

React's useEffect hook supports returning a cleanup function, which is the most standard way:

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

  return () => {
    clearTimeout(timer);
  };
}, []);

This cleaning function will be executed once before the component is uninstalled, or it can clean up the last side effects first and then re-execute the current effect when the dependency changes.

If you have multiple side effects to clean up, you can handle them in one function:

 useEffect(() => {
  const timer = setInterval(fetchData, 5000);
  window.addEventListener('resize', handleResize);

  return () => {
    clearInterval(timer);
    window.removeEventListener('resize', handleResize);
  };
}, []);

Common misunderstandings and precautions

• Missing dependencies : In React's useEffect , if the dependencies are not set correctly, it may cause closure problems.
• Repeat cleaning : Do not call removeEventListener or clearTimeout multiple times, as errors are prone to occur.
• Forgot to clean up asynchronous requests : For example, axios requests can be canceled using CancelToken or encapsulated abort controller.
• Side effects of third-party libraries : Some plug-ins register global events or resources and need to be cleaned manually.

For example, use AbortController to cancel a fetch request:

 useEffect(() => {
  const controller = new AbortController();

  fetch('https://api.example.com/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => console.log(data));

  return () => {
    controller.abort();
  };
}, []);

Basically that's it. Side effects management may seem simple, but details are easily overlooked in actual development, especially in scenarios where complex components or frequent updates are performed. Just remember: any operations that will "continue" should be cleaned up at the appropriate time .

The above is the detailed content of How to properly clean up side effects in lifecycle hooks?. For more information, please follow other related articles on the PHP Chinese website!