Как очистить асинхронную функцию для componentDidUpdate с помощью хуков

Question

У меня есть компонент, при монтировании которого я подписываюсь на сокет (асинхронная задача) и должен отписаться (асинхронно) при размонтировании. Когда компонент обновляется, я должен отписаться от старого сокета и подписаться на новый. Я не уверен, как это сделать, используя реакционные хуки. Прикрепление примера кодов и коробки для справки.

https://codesandbox.io/s/clever-robinson-h0gq5

Answer 1

Я не уверен, как вы хотели бы реализовать код в своей песочнице, но я думаю, что для вызова и асинхронной задачи внутри эффекта вы можете сделать это следующим образом:

useEffect(() => {
  const timeout = async (msg, time) => {
    await setTimeout(() => {
      console.log(msg);
    }, time);
  }
  timeout("subscribed to websocket", 2000);
  return () => {
    timeout("unsubscribed to websocket", 3000);
  };
}, [match]);

Чтобы использовать async await в useEffect вам нужно объявить его внутри функции и вызвать его оттуда.