componentWillUnmount

ComponentWillUnmount is a lifecycle method in React class components. It is invoked immediately before a component is unmounted and destroyed, giving the component a chance to perform any necessary cleanup.

The method is commonly used to release resources that were created when the component was mounted or during its lifecycle. Typical cleanup tasks include clearing timers or intervals, canceling network requests, removing event listeners, and unsubscribing from data sources or subscriptions. It can also be used to disconnect or dispose of third-party integrations that were set up in other lifecycle methods.

ComponentWillUnmount is not a place to start data fetching or to perform significant side effects. Instead, its role is to tidy up to prevent memory leaks and unwanted ongoing processes after the component is removed from the UI.

In modern React development, functional components with hooks are often used instead of class components. The cleanup logic that would go in componentWillUnmount is typically placed in a cleanup function returned by useEffect. This aligns with the declarative pattern encouraged by hooks. For developers maintaining class components, componentWillUnmount remains valid and commonly used for cleanup, including canceling pending operations started earlier in the component’s lifecycle.

Note that componentWillUnmount is not called during server-side rendering. It runs only in the client when a component is about to be removed from the DOM.