[bug] Unable to unlisten event properly in react's useEffect

[canxin121]

Describe the bug

I wrote the following code using next.js, which uses the useEffect of React. But the code doesn't work, when refreshing the page alert("unlisten: " + unlisten) always results in "unlisten: undefined", causing the number of listens to increase with each refresh. Can anyone tell me what I should do to get unlisten to work?

"use client";
import { invoke } from "@tauri-apps/api/core";
import { useEffect } from "react";
import { listen } from "@tauri-apps/api/event";

export default function Page() {
  function msgHandler(msg) {
    console.log(msg);
  }
  useEffect(() => {
    let unlisten;

    listen("event", msgHandler).then((unlisten_) => {
      unlisten = unlisten_;
    });

    return () => {
      alert("unlisten: " + unlisten);
      if (unlisten) {
        unlisten();
      }
    };
  }, []);

  return (
    <>
      {/* This button invoke app.emit("event","msg") */}
      <button
        onClick={() => {
          invoke("emit", "msg");
        }}
      >
        emit
      </button>
    </>
  );
}

Reproduction

https://github.com/canxin121/test_emit

Expected behavior

Before the page is refreshed, unlisten should already be a function and not undefined, and then unlisten is called normally.

Full tauri info output

- Visual Studio Build Tools 2019
        - Visual Studio Community 2022
    ✔ rustc: 1.76.0-nightly (e9013ac0e 2023-12-05)
    ✔ cargo: 1.76.0-nightly (623b78849 2023-12-02)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: nightly-x86_64-pc-windows-msvc (environment override by RUSTUP_TOOLCHAIN)
    - node: 21.2.0
    - pnpm: 8.15.2
    - yarn: 1.22.21
    - npm: 10.2.3

[-] Packages
    - tauri [RUST]: 2.0.0-beta.3
    - tauri-build [RUST]: 2.0.0-beta.2
    - wry [RUST]: 0.36.0
    - tao [RUST]: 0.25.0
    - tauri-cli [RUST]: 2.0.0-beta.1
    - @tauri-apps/api [NPM]: 2.0.0-beta.1
    - @tauri-apps/cli [NPM]: 2.0.0-beta.1

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../out
    - devUrl: http://localhost:3000/
    - framework: React (Next.js)
    - bundler: Webpack

Stack trace

: undefined before the page being refreshed.

Additional context

No response

[canxin121]

see #8930 #8916