IPC Communication Between Processes

ipcMain.handle registers a named channel in the main process that responds to requests from the renderer. It accepts an async handler function and its return value becomes the resolved value of the Promise in the renderer, making it ideal for operations like reading files or querying a database.

ipcRenderer.invoke sends a message on a named channel and returns a Promise that resolves with the main process handler's return value. This creates a clean async request-response pattern that works naturally with async/await in both the preload script and React components.

The preload script wraps ipcRenderer.invoke calls and exposes them through contextBridge. For example: api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath). The renderer calls window.api.readFile(path) and gets a Promise back — clean and sandboxed.

With contextIsolation enabled, the renderer process cannot require('electron') or import ipcRenderer directly — the module is simply unavailable. All IPC must go through the preload script's contextBridge exposure. This is intentional: it prevents XSS attacks from gaining IPC access.

ipcMain.on listens for one-way messages sent with ipcRenderer.send (not invoke). There is no automatic response channel — this pattern suits notifications or commands where the renderer doesn't need a reply, such as logging events or triggering a native notification.

The main process can push data to the renderer using webContents.send('channel-name', data). This is the primary way the main process initiates communication — for example, forwarding file system watch events or native menu actions to the React UI.

In the preload script, ipcRenderer.on('update', callback) registers a listener for push messages from the main process. The callback receives the event and any data the main process sent, which you then pass through to the renderer via the contextBridge-exposed function.

A clean pattern for push events is: api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)). React components subscribe by calling window.api.onUpdate(setData), and the callback updates state when the main process pushes new data.

Every ipcRenderer.on listener must be removed when no longer needed to prevent memory leaks and duplicate callbacks. The preload function should return a cleanup function (e.g., () => ipcRenderer.removeListener('update', callback)) that React calls from the useEffect cleanup return.

IPC inputs from the renderer should be treated as untrusted data in the main process handler. Always validate file paths (prevent path traversal attacks), sanitize query parameters, and check that the sender's origin is expected. Never expose a generic eval or exec IPC channel.

As your app grows, organize IPC channels with namespacing conventions: 'fs:read-file', 'db:query', 'window:minimize'. Keep channel names in a shared constants file imported by both main.js and the preload script to prevent typos and make refactoring safer.

What happens to the value returned by an ipcMain.handle handler?

IPC is the backbone of Electron communication. ipcMain.handle and ipcRenderer.invoke form a Promise-based request-response pair for renderer-initiated operations. For main-initiated pushes, webContents.send and ipcRenderer.on work together. All IPC in the renderer must be routed through the preload's contextBridge, and listeners should always be cleaned up to prevent memory leaks.