How To Run A React Hook When A Component Unmounts

Posted on by Nathaniel Kirk
Run a React hook when a component Unmounts

While using the React framework, there will come a time you need to run a React hook when a component unmounts. This article will show you some ways to do that, like using component will unmount() or using the useEffect() hook.

Run a React hook when a component unmounts

The unmounting process occurs when the component is removed from the DOM. In other words, the component will unmount function when no components are rendered or the user redirects the web page.

Using componentWillUnmount() method

In this method, we will use the component will unmount() function of the component class. This function is already defined to run when the component is unmounted, so when we write the processing code inside this function, the code will be run when the component unmounts.

Code:

import React from 'react';
class ChildComponent extends React. Component {
  componentWillUnmount() {
    //Use React hook here
    alert("The component will unmount!")
  }
 
  render() {
    return <h3>Hello My Friend!!</h3>;
  }
}
 
class App extends React. Component {
  state = { display: true };
  delete = () => {
    this.setState({ display: false });
  };
 
  render() {
    var component;
    if (this.state.display) {
      component = <ChildComponent />;
    }
    return (
      <>
        <h2>Run a React hook when a component Unmounts | LearnShareIT</h2>
        {component}
        <button onClick={this.delete}>
          Delete the child component
        </button>
      </>
    );
  }
}
 
export default App;

Output:

So when we press the button, the component will still be unmounted, and the program will catch this event, and run the code inside the component will unmount and alert the screen. You can add a react hook here or refer to how to do it with functional components in the next section.

Using useEffect() method

First, you need to know the lifecycle in useEffect, on the first render:

MOUNTING

  • rendering (run the jsx part first).
  • run useEffect() (Note that it only runs the side effect, not the cleanup part).
  • Until the next render.

UPDATING

  • rendering (re-render the jsx first).
  • Run useEffect() cleanup if the dependencies change (This time, it will clean up the side effect that was run last time on mounting).
  • Run useEffect() if dependencies change. (This part will run the side effect for the second time).
  • The last step will unmount, so it will clean up before unmounting.

UNMOUNTING

  • run useEffect() cleanup.

So running a react hook when the component is where we have to add it in useEffect(). See the code below for more details

Code:

import React, { useEffect, useState } from "react";
 
const ChildComponent = () => {
  const [message, setMessage] = useState("Hello My Friend!!");
  useEffect(() => {
    return () => {
      setMessage("");
      alert("The component will unmount!");
    };
  });
  return <h3>{message}</h3>;
};
 
const App = () => {
  const [display, setDisplay] = useState(true);
  const handledelete = () => {
    setDisplay(false);
  };
  var component;
  if (display) {
    component = <ChildComponent />;
  }
 
  return (
    <>
      <h2>Run a React hook when a component Unmounts | LearnShareIT</h2>
      {component}
      <button onClick={handledelete}>Delete the child component</button>
    </>
  );
};
 
export default App;

Output:

This is the same as above. The difference is that we will use the react hook when the component unmounts by putting it in the return function of useEffect. Because here will identify when the ChildComponent component is unmounted. Hope these will work with your code.

Summary

To summarize, this article has shown you two ways to run a React hook when a component unmounts with the class component and functional component. Let’s try these methods to get your desired results. Good lucks!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *