My React App is working very slow on LocalHost but it is working fine in Live Server. UI Rendering i-CodePudding

I am working on a React-TS App. It is loading fine in live server. But in dev mode in localhost it is very slow. After doing some research I came up with no solution. Here is me package json file.

{
  "name": "xiq-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.23",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.18.6",
    "apexcharts": "^3.35.0",
    "axios": "^0.26.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "branch-sdk": "^2.59.0",
    "buffer": "^6.0.3",
    "classnames": "^2.3.1",
    "dotenv": "^16.0.0",
    "env-cmd": "^10.1.0",
    "eslint": "^8.9.0",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-plugin-react-hooks": "^4.5.0-next-2bf5eba72-20220416",
    "formik": "^2.2.9",
    "highcharts": "^10.0.0",
    "highcharts-react-official": "^3.1.0",
    "html-react-parser": "^1.4.9",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.3",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "react": "^18.0.0",
    "react-apexcharts": "^1.4.0",
    "react-bootstrap-daterangepicker": "^7.0.0",
    "react-dnd": "^16.0.0",
    "react-dnd-html5-backend": "^16.0.0",
    "react-dnd-scrolling": "^1.2.4",
    "react-dnd-touch-backend": "^16.0.0",
    "react-dom": "^18.1.0",
    "react-google-recaptcha-v3": "^1.9.7",
    "react-infinite-scroll-component": "^6.1.0",
    "react-lazy-load-image-component": "^1.5.4",
    "react-masonry-component": "^6.3.0",
    "react-onesignal": "^2.0.4",
    "react-outside-click-handler": "^1.3.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-share": "^4.4.0",
    "react-verification-code-input": "^1.2.9",
    "react-waypoint": "^10.1.0",
    "redux-injectors": "^1.3.0",
    "redux-saga": "^1.1.3",
    "slow-deps": "^1.4.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts start",
    "start:dev": "./node_modules/.bin/env-cmd -f ./environment/.env.development react-scripts start",
    "start:local": "cross-env ./node_modules/.bin/env-cmd -f ./environment/.env.local react-scripts start",
    "start:stag": "./node_modules/.bin/env-cmd -f ./environment/.env.staging react-scripts start",
    "start:prod": "./node_modules/.bin/env-cmd -f ./environment/.env.production npm react-scripts start",
    "start:uat": "./node_modules/.bin/env-cmd -f ./environment/.env.uat npm react-scripts start",
    "build": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts build",
    "build:dev": "./node_modules/.bin/env-cmd -f ./environment/.env.development react-scripts build",
    "build:local": "./node_modules/.bin/env-cmd -f ./environment/.env.local react-scripts build",
    "build:stag": "./node_modules/.bin/env-cmd -f ./environment/.env.staging react-scripts build",
    "build:prod": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts build",
    "build:uat": "./node_modules/.bin/env-cmd -f ./environment/.env.uat react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/branch-sdk": "^2.53.3",
    "@types/js-cookie": "^3.0.1",
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-outside-click-handler": "^1.3.1",
    "@types/styled-components": "^5.1.22",
    "@types/webpack-env": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "typescript": "^4.5.5"
  }
}

I tried removing the es-lint and lint related dependencies and dev/redux tools but the problem is still there. API is working fine and getting responses on time. I think there is some issue with UI and component rendering. Any help and guide would be highly appreciated. Let me know if you need to see other code related stuff to reach the root cause.

CodePudding user response：

Try removing devDependencies one by one and check if it helps? Otherwise turn off images for your web app and check if it improves the performance or not.

CodePudding user response：

Please use react.Memo. you are using eslint. I think so, maybe eslint is a reason that slows your app. Remove eslint then try it again. Following.