how do I avoid listening to a same event twice?

[wangxiaochuTHU]

Hello, yesterday I managed to make first tauri-app by following the official guide. But after that, when I tried letting Rust backend emit event to trigger Next.js frontend, the frontend captured two same copies of the event. The listen and emit looks like this:

// frontend side

function App() {
// . . .
useEffect(() => {
    //listen to a event
    listen("event-name", (e) => {
      console.log(e.payload);
    });

    // invoke a Rust function to start a loop for periodically emitting event.
    start_backend_emitting_loop();
  }, [] );

// . . .

return(
     // . . .
  )
}

// Rust side

#[tauri::command]
async fn start_backend_emitting_loop(window: tauri::Window) {
// . . . 
loop {
        window
            .emit(
                "event-name",
                Payload {
                    message: format!("{} sent from Rust", ms).into(),
                },
            )
            .unwrap();
    }
}

From the console and terminal I saw that frontend is triggered twice on a single emit. Am I using a wrong way to listen?

[abisar]

Are you using strict mode of react? Because that makes components to render twice. Please put a console.log(Math.random()) in useEffect and check if you get 2 logs or 1:

useEffect(() => {
    console.log(Math.random());
}, []);

[wangxiaochuTHU]

Yes, I got 2 such logs, thank you for pointing this out! Setting reactStrictMode to false successfully solved my problem.

[abisar]

You don't have to leave strict mode, it has a lot of good stuff. After build, it will only be called once but if it's annoying in development, maybe it's best to turn it off.
By the way as FabianLars mentioned, you may want to unlisten on unmount:

useEffect(() => {
    const unlisten = listen("event-name", (e) => {
      console.log(e.payload);
    });
    return unlisten;
}, []);

You wouldn't want a graveyard of events in your app.

[FabianLars]

Tauri's Events work similar to browser native events, which means that you need to unlisten to them on unMount.

useEffect(() => {
    //listen to a event
    const unlisten = listen("event-name", (e) => {
      console.log(e.payload);
    });

    // invoke a Rust function to start a loop for periodically emitting event.
    start_backend_emitting_loop();

    return () => {
      unlisten.then(f => f());
    }
  }, [] );

Note that start_backend_emitting_loop() needs some test on the backend too, so you don't end up starting that loop multiple times.

P.S. if your component can't realistically unMount (betting on that is really risky btw*), then check abisar's response and disable strict mode.

What i mean with it being risky:

1. in general it's not always clear when React unmounts and it can do so in unexpected situations
2. If you want to use something like react-router or conditional rendering later you'll hit the same problem
3. A user can refresh your app at any time.

[wangxiaochuTHU]

Thanks for guide of design, it really helps and I will try using this pattern. Count checking was used to made emitting loop exactly start once. Without this checking, the frontend turns out to be triggered 4 times in strict mode. Thanks!

[wangxiaochuTHU]

Having tried Tauri for only three days, I feel I already get used to its style because it's naturally ergonomic. For a deeper investigation, I wonder if it is possible to build 3D modeling apps, looking like CAD or Blender, with or on top of Tauri? Is that trivial?

[FabianLars]

Sorry forgot to answer :/ I wouldn't call it trivial tbh, i don't think web renderers are fast enough for that kind of workload (especially considering that webgl2 is not supported on linux and on macos only on v12) 🤔 but imo that needs something more native, so i guess once tao gets closer to winit (or we swap it out) one could look into integrating something like bevy for that

[wgibbs-rs]

Tauri could absolutely handle a 3D modeling software. I wouldn't invest in that, considering I believe 3D modeling software to be completed in it's development with Blender, but Tauri could handle that. In fact, I needed to use 3D modeling physics in an app (I can't say any more about it) that I worked on. We used Three.js, which is a great WebGL 3D library for using 3D physics in Rust. The container is a bit weird, but otherwise it took literally fifteen minutes from discovery of Three.js to full implementation in the ReactJS app. Tauri is a graphical thing, not a computation thing. Rust is REALLY fast if done right. Both can work together for complex tasks.