[fs:watch] memory leak when refresh page.

[cathaysia]

When I using the following hook watch a folder:

function isInterest(e: WatchEventKind) {
  // @ts-expect-error: xxx
  return e.create | e.modify | e.remove;
}

let oldChangeTime = '';
export function useFolderChanges() {
  const [path] = useAppStore(s => [s.path]);
  const [count, setCount] = useState(0);
  const [handle, setHandle] = useState<UnwatchFn | null>(null);

  useEffect(() => {
    if (!path || path.length === 0) {
      if (handle !== null) {
        handle();
        setHandle(null);
      }
      return;
    }
    if (path === oldChangeTime) {
      return;
    }
    oldChangeTime = path;
    (async () => {
      debug(`watch ${path}`);
      const h = await watch(
        path,
        e => {
          if (isInterest(e.type)) {
            setCount(count => {
              return count + 1;
            });
          }
        },
        {
          delayMs: 100,
          recursive: true,
        },
      );
      setHandle(s => {
        if (s !== null) {
          debug('cancel watch');
          s();
        }
        return h;
      });
    })();
  }, [path]);

  return count;
}

However, when I refresh webpage. Then memory will leak:

ref

notify-rs/notify#672

[FabianLars]

tauri-apps/tauri#10266

[cathaysia]

tauri-apps/tauri#12388