Блог

Я создаю приложение, которое использует React, Redux, Firebase и функцию onSnapshot(). Я читал, что для снижения затрат и обновления сервера рекомендуется отказаться от подписки на onSnapshot, когда пользователь покидает компонент.

Итак, мой вопрос: как я могу узнать, когда пользователь покидает компонент или путь в react, чтобы отменить запись onSnapshot?

Спасибо!

В компоненте класса React используйте componentDidMount и componentWillUnmount для добавления и удаления прослушивателей или подписок:

 class MyComponent extends React.Component {
  componentDidMount() {
    // Add listeners, subscriptions, etc.
  }

  componentWillUnmount() {
    // Remove listeners, subscriptions, etc.
  }

  render() {
    ...
  }
}
  

В компоненте функции React используйте useEffect перехват, чтобы сделать то же самое. Обязательно добавьте соответствующие зависимости в useEffect массив зависимостей (второй аргумент).

 const MyComponent = (props) => {
  useEffect(() => {
    // Add listeners, subscriptions, etc.

    return () => {
      // This function will be called just before the component unmounts.
      // Remove listeners, subscriptions, etc.       
    };
  }, [/* Dependency array */]);

  return (...);
};
  

 componentWillUnmount() { // your Code here }
  

«Этот метод вызывается, когда компонент удаляется из DOM» (из: https://reactjs.org/docs/react-component.html ). Надеюсь, это то, что вы искали.