How to Fix UI Freezing in Electron Apps Using Node Worker Threads

Building desktop applications with Electron offers incredible flexibility, but it comes with a common architecture trap. Because Electron’s Main and Renderer processes run on single threads, executing a heavy CPU-intensive operation—like processing large local files, cryptographic hashing, or managing massive JSON parsing—will instantly freeze your application’s user interface.

Users see a stalled window or an “Application Not Responding” warning. To keep your desktop application running at a fluid 60 FPS, you must offload heavy background operations to dedicated Node.js Worker Threads.

In this guide, we will implement a multi-threaded system inside an Electron utility layout.

1. Why IPC Alone Doesn’t Fix UI Freezing

Many developers assume that passing a heavy task from the Renderer process to the Main process via ipcMain and ipcRenderer solves performance lag. It does not. The Main process handles your application’s lifecycle and window rendering. If you clog the Main process loop, your entire application still locks up.

Instead, you must spawn a completely separate background thread using the native Node.js worker_threads module.

2. Writing the Background Worker Script

First, create a separate file in your project named worker.js. This script will execute the heavy math or parsing safely away from your primary interface threads.

JavaScript

const { parentPort, workerData } = require('worker_threads');

// Simulate a heavy computational CPU task
function performHeavyCalculation(iterations) {
    let count = 0;
    for (let i = 0; i < iterations; i++) {
        count += Math.sqrt(i);
    }
    return count;
}

// Receive processing instructions from the main application thread
const result = performHeavyCalculation(workerData.iterations);

// Post the final computed data back to the parent thread
parentPort.postMessage({ success: true, data: result });

3. Spawning the Worker Thread from Electron Main

Now, update your primary Electron main.js file to safely initialize this background thread when requested by an internal event hook.

JavaScript

const { app, BrowserWindow, ipcMain } = require('electron');
const { Worker } = require('worker_threads');
const path = require('path');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });
    mainWindow.loadFile('index.html');
}

// IPC Listener that handles processing requests without freezing the UI
ipcMain.handle('trigger-heavy-task', async (event, iterationsCount) => {
    return new Promise((resolve, reject) => {
        // Spawn the background thread script
        const worker = new Worker(path.join(__dirname, 'worker.js'), {
            workerData: { iterations: iterationsCount }
        });

        // Listen for data responses from the worker thread
        worker.on('message', (message) => resolve(message));
        
        // Catch runtime execution execution failures safely
        worker.on('error', (err) => reject(err));
        
        worker.on('exit', (code) => {
            if (code !== 0) reject(new Error(`Worker stopped with exit code ${code}`));
        });
    });
});

app.whenReady().then(createWindow);