#IPC sending data twice

23 messages · Page 1 of 1 (latest)

faint nexus
#

Hello, im trying to send data from main to renderer but im receiving the data twice everytime any idea why?

MAIN:

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 954,
    height: 700,
    resizable: false,
    frame: false,
    icon: path.join(__dirname, 'electron-assets/Logo.ico'),
    webPreferences: {
      preload: path.join(__dirname, 'lib/preload.js')
    },
  });

  if (isDev) {
    mainWindow.loadURL('http://localhost:5173');
  } else {
    mainWindow.loadFile(path.join(__dirname, './dist/index.html'));
  }

  let count = 0;
  const d = {
    id: 5,
    title: "this is the new one",
    msg:
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.",
    time: "25 April, 2024 15:30",
  }
  setInterval(() => {
    mainWindow.webContents.send("newMessage", d)
    count++;
    console.log(`emitted: ${count}`)
    console.log(d)
  }, 5000);

}

and the preload.js :

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
    exit: (exit) => ipcRenderer.send("exit", exit),
    minimize: (minimize) => ipcRenderer.send("minimize", minimize),
    maximize: (maximize) => ipcRenderer.send("maximize", maximize),
    onMessage: (callback) => ipcRenderer.on("newMessage", (event, args)=> {
        console.log(args)
        callback(args)
    })
});

the main logs emitted once everytime but on the renderer the data is received twice

plucky ice
#

What's your renderer code?

faint nexus
# 
    useEffect(() => {

        window.electron.onMessage((data) => {
        // console.log(data);
        });

    }, []);

nothing is printing here yet

#

i only have 4 console logs on my entire projects, 2 on main and 1 in preload to see the data and 1 tagged in the this renderer

plucky ice
#

It's the strict mode

#

your component render twice

#

and you need to add a cleanup function

faint nexus
#

wow it is the strict mode, never knew it will render twice

#

removing strict mode did it, just general question is it possible to fix it without removing strict mode / what does strict mode does exactly?

plucky ice
faint nexus
#

Thank you so much

plucky ice
#

try to add a cleanup function that remove the listener to your useEffect

faint nexus
#

any reasons why? shouldn't it just wait for events to emit and it will receive it and add new messages?

plucky ice
#

If you don't remove the listener, it will add a new one every time your component mount

#

not only you will have bug, but you can also get memory leaks

faint nexus
#

Ah i see so it doesnt mount it twice i see i see

#

what is the best way to clean it up ?

plucky ice
#

a cleanup function in useEffect is simply a function you return

#

and you can use ipcRenderer.removeListener or ipcRenderer.removeAllListeners

#

you can make the onMessage returns the cleaup function if you use removeListener, but you need to store the callback in a const because you need it for removeListener. I think you only need the channel name with removeAllListeners

faint nexus
#

oh i see i see what you mean i stored messageHandler in a cnonst and makde a const cleanup which stored the onMessage after that i returned the cleanup and removed the listener i see what you mean thank you, you're awesome 😄