javascript - useEffect cleaning function is not called when tab is closed - Stack Overflow

admin管理员组

文章数量:1193750

I have this useEffect which I use just for cleaning:

  useEffect(() => {
    return function cleanup() {
      if (!room || !currentPortal) return;
      leavePortal(
        room,
        currentPortal,
        currentUserProfile && currentUserProfile.uid
          ? currentUserProfile.uid
          : uniqueId
      );
      detachListener();
    };
  }, [isFirstLoad, currentUserProfile, currentPortal]);

I can go back and forth and it works just fine, but does nothing if the tab is closed. Is that how useEffect works? Does it not detect the tab closing?

I have this useEffect which I use just for cleaning:

  useEffect(() => {
    return function cleanup() {
      if (!room || !currentPortal) return;
      leavePortal(
        room,
        currentPortal,
        currentUserProfile && currentUserProfile.uid
          ? currentUserProfile.uid
          : uniqueId
      );
      detachListener();
    };
  }, [isFirstLoad, currentUserProfile, currentPortal]);

I can go back and forth and it works just fine, but does nothing if the tab is closed. Is that how useEffect works? Does it not detect the tab closing?

• javascript
• reactjs

Share Improve this question Follow asked Apr 19, 2020 at 18:56 TsabaryTsabary 3,92844 gold badges3939 silver badges9191 bronze badges 5

• 1 I don't think useEffect() triggers on page unload. You'll have to explicitly add a beforeunload listener for that. – kevmo314 Commented Apr 19, 2020 at 18:57
• 1 You should use the beforeUnload for that. Also remove the event listener when component unmounts. – HMR Commented Apr 19, 2020 at 19:00
• @HMR you mean the listener for beforeUnload? But isn't that the last thing that happens? Do I remove it from within itself? Also, does it actually remains after the tab closes? I would have thought that once the tab closes everything wipes – Tsabary Commented Apr 19, 2020 at 19:05
• 1 @Tsabary The effect in your question will run when component unmounts, it might cause an error when you run it again when window unloads. If it doesn't then you can leave it there but if you keep mounting and unmounting the component then you will add a lot of listeners and may get unexpected results when the window is closed (unload of the window will trigger all the event listeners). See given answer, that will work. – HMR Commented Apr 19, 2020 at 19:11
• 1 Your hook seems to have a lot of missing dependencies like room, leavePortal, uniqueId and dispatchListener. If these are all imported and are not created within your component then you're fine but if any of them are not you might end up with a stale closure. Your linter should have warned you about it since recent create-react-app projects use exhaustive deps – HMR Commented Apr 19, 2020 at 19:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 30

useEffect will not detect tab close by default.

However you can implement that by yourself:

useEffect(() => {
  const cleanup = () => {
    // do your cleanup
  }

  window.addEventListener('beforeunload', cleanup);

  return () => {
    window.removeEventListener('beforeunload', cleanup);
  }
}, []);

本文标签： javascriptuseEffect cleaning function is not called when tab is closedStack Overflow