Electron and React app experiences refresh-like effect during IPC database operations

Question

I'm developing a desktop application using Electron and React, and I'm encountering an issue where performing write operations to a SQLite database via IPC causes a refresh-like effect in the UI. This happens without the page actually reloading.

Here's a summary of the relevant code:

Electron Main Process:

ipcMain.handle("addManufacture", async (event, name) => {
  const manufacturer = await models.Manufacturer.create({ name });
  return manufacturer;
});

React Component:

const handleAddManufacturer = () => {
  window.electron
    .addManufacture(newManufacturerName)
    .then((manufacturer) => {
      setManufacturers([...manufacturers, manufacturer]);
      setNewManufacturerName("");
      onClose();
    })
    .catch((error) => {
      console.error(error);
    });
};

The refresh-like effect occurs right after the IPC call. There are no navigation or window reload commands in any part of the code that is being executed. I've confirmed that no unnecessary re-renders or state updates are causing this effect. How can I diagnose and resolve this issue?

My package.json file:

{
  "name": "parts-app",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "homepage": ".",
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@reduxjs/toolkit": "^2.2.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.1.0",
    "axios": "^1.7.2",
    "browserify-zlib": "^0.2.0",
    "crypto-browserify": "^3.12.0",
    "electron-is-dev": "^3.0.1",
    "framer-motion": "^11.3.19",
    "path-browserify": "^1.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.25.1",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "sequelize": "^6.37.3",
    "sqlite3": "^5.1.7",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.4",
    "util": "^0.12.5",
    "uuid": "^10.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "concurrently \"npm run start-react\" \"npm run start-electron\"",
    "start-react": "react-scripts start",
    "start-electron": "wait-on http://localhost:3000 && electron .",
    "build": "react-scripts build && electron-builder",
    "postinstall": "electron-builder install-app-deps",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test"
  },
  "build": {
    "appId": "com.parts-app",
    "mac": {
      "category": "public.app-category.productivity"
    },
    "win": {
      "target": [
        "nsis",
        "portable"
      ]
    },
    "files": [
      "build/**/*",
      "public/electron.js"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.8",
    "@babel/preset-react": "^7.24.7",
    "concurrently": "^8.2.2",
    "electron": "^31.3.0",
    "electron-builder": "^24.13.3",
    "wait-on": "^7.2.0"
  }
}

Currently as i can't able to add database with squilize orm in react so I add database, services in public folder where my electron.js file exists so i am communicating database operation with react using ipc main renderer. But don't know when i get data from database there is no auto refresh app but when i add/update/delete then it refreshes the app.

Answer 1

Hye everyone this issue is resolved now as What i am doing wrong is I put electron.js, preload.js and database configuration in public folder so when there is change in database file, it refreshes the whole app.