window.ipcRenderer.off is not working on renderer process.

[sven0227]

function App() {
const [count, setCount] = useState(0);

const handler = useCallback(() => {
console.log("added received!!!");
}, []);

useEffect(() => {
window.ipcRenderer.on("added", handler);
return () => {
window.ipcRenderer.off("added", handler);
};
}, []);
...
}

// main.ts
ipcMain.handle("add", (event) => {
console.log("add");
event.sender.send("added", { message: "added" });
});

The "added" handler on renderer process is double called every main process sends "added" event.
It means that window.ipcRenderer.off is not working on renderer process.

[ViniciusFXavier]

Hello @sven0227,

A few things to check:

Ensure the handler function is stable.
You're using useCallback(() => { ... }, []), which should ensure a stable reference. Double-check that handler is not being redefined across renders unexpectedly.

Confirm multiple components aren’t mounting listeners.
If multiple instances of this component (or other components) are mounting and adding the same listener, the .off() in one might not remove the others. Consider using window.ipcRenderer.removeAllListeners("added") for testing purposes to clear all.

If all else fails, try using once instead of on if the event should only be received once, or explicitly clean up using removeAllListeners("added") before adding a new one to prevent duplicates.

[ViniciusFXavier]

I just remembered a point that may be causing your problem.

Double Mounting in React Strict Mode (Development Only)

React Strict Mode double-invokes useEffect's setup and cleanup functions to help detect bugs.

This can lead to handlers being registered multiple times unexpectedly.

Check if your app is wrapped in <React.StrictMode> in index.tsx or main.tsx. If yes, remove it temporarily to confirm this is the issue:

// From 
<React.StrictMode> // <- REMOVE THIS IN DEV TO TEST
  <App />
</React.StrictMode>

// To:
<React>
  <App />
</React>

If removing it fixes the issue, you now know it’s just a dev-mode thing. In production, this problem won’t happen because Strict Mode’s double invocation is only in development.

---

Or, you can try to move the handler to inside of the useEffect.
This guarantees the handler reference is stable within the effect.

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handler = () => {
      console.log("added received!!!");
    };

    window.ipcRenderer.on("added", handler);
    return () => {
      window.ipcRenderer.off("added", handler);
    };
  }, []); // no need for useCallback
}