How to get notified when moving back from React component?

We have this component. How to get notified when component unmounts or disappears?

function EventTime(props) {
  const match = useRouteMatch();
  const eventTime = findEventTime(match.params.eventTimeId);
  const eventTimeId = match.params.eventTimeId;
  const pageId = getId(undefined, eventTimeId, true, false);
  const eventId = getId(undefined, eventTimeId, false, true);
  const [
    enableSellingTicketForEventTime,
    setEnableSellingTicketForEventTime
  ] = useState(eventTime.enableSellingTicketForEventTime);
  const [additionalNotesOnMyTicket, setAdditionalNotesOnMyTicket] = useState(
    ""
  );

  const changeAdditionalNotesOnMyTicket = event => {
    setAdditionalNotesOnMyTicket(event.target.value);
  };

  const handleSwitchItem = () => {
    setEnableSellingTicketForEventTime(!enableSellingTicketForEventTime);
  };

  const updateAdditionalNotesOnMyTicket = () => {
    update({
      pageId,
      eventId,
      eventTimeId,
      additionalNotesOnMyTicket
    }).then(data => {
      const managedPages = JSON.parse(localStorage.getItem("managedPages"));
      const index = managedPages.findIndex(
        managedPage => managedPage.id === pageId
      );
      managedPages[index].events[eventId].eventTimes[
        eventTimeId
      ].additionalNotesOnMyTicket = additionalNotesOnMyTicket;
      localStorage.setItem("managedPages", JSON.stringify(managedPages));
      console.log(JSON.parse(localStorage.getItem("managedPages")));
    });
  };

  console.log(eventTime);
  return (
    <div>
      <List>
        {page().permission === "admin" && (
          <Link
            to={`/eventTimeLocationSelector/${match.params.eventTimeId}`}
            style={{ textDecoration: "none", color: "black" }}
          >
            <NavigationItem
              primary="Location"
              secondary={
                eventTime.locationId
                  ? getLocationName(eventTime.locationId)
                  : ""
              }
            />
          </Link>
        )}
        {page().permission === "admin" && page().auditoriums && (
          <Link
            to={`/eventTimeAuditoriumSelector/${match.params.eventTimeId}`}
            style={{ textDecoration: "none", color: "black" }}
          >
            <NavigationItem
              primary="Auditorium"
              secondary={
                eventTime.auditoriumId
                  ? getAuditoriumName(eventTime.auditoriumId)
                  : ""
              }
            />
          </Link>
        )}
        {page().permission !== "validateTicket" && (
          <SwitchItem
            primary="Enable selling ticket for event time"
            checked={enableSellingTicketForEventTime}
            change={handleSwitchItem}
            default={false}
          />
        )}
        <Link
          to={`/eventTimeTransactions/${match.params.eventTimeId}`}
          style={{ textDecoration: "none", color: "black" }}
        >
          <NavigationItem primary="Sold tickets" />
        </Link>
        <TextFieldItem
          primary="Additional notes on my ticket"
          value={additionalNotesOnMyTicket}
          onChange={changeAdditionalNotesOnMyTicket}
          onBlur={updateAdditionalNotesOnMyTicket}
        />
      </List>
      {page().permission !== "validateTicket" &&
        page().permission !== "teacher" && (
          <Box style={{ display: "flex", justifyContent: "flex-end" }} mr={2}>
            <Button variant="contained" color="primary">
              Add person
            </Button>
          </Box>
        )}