My Next.js app getting slow and having memory heap issue on developing.

[naseef0]

Bug report

When i'm running my next.js app, its getting very slow and sometimes having memory heap issue on running.

System information

• OS: macOS, Windows
• Browser: chrome
• Version of Next.js: v9.3.6
• Version of Node.js: v14.5.0

My package.json

{
  "name": "commerce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "node src/server.js",
    "build": "next build",
    "start": "cross-env NODE_ENV=production node src/server.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.4.1",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "filepond": "^4.13.0",
    "filepond-plugin-file-validate-type": "^1.2.5",
    "filepond-plugin-image-crop": "^2.0.3",
    "filepond-plugin-image-exif-orientation": "^1.0.6",
    "filepond-plugin-image-preview": "^4.6.1",
    "google-map-react": "^1.1.5",
    "html-react-parser": "^0.13.0",
    "next": "^9.3.6",
    "next-i18next": "^3.0.1",
    "nookies": "^2.3.2",
    "prop-types": "^15.7.2",
    "query-string": "^6.11.1",
    "rc-slider": "^9.1.0",
    "react": "16.12.0",
    "react-cookie": "^4.0.3",
    "react-dom": "16.12.0",
    "react-filepond": "^7.0.1",
    "react-ga": "^2.7.0",
    "react-gtm-module": "^2.0.8",
    "react-hook-form": "^5.7.2",
    "react-icons": "^3.8.0",
    "react-responsive": "^8.0.3",
    "reactstrap": "^8.2.0",
    "sass": "^1.26.5"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "cross-env": "^6.0.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0"
  }
}

<--- Last few GCs --->

[4562:0x103e3b000]   161295 ms: Mark-sweep 2041.6 (2051.3) -> 2040.7 (2051.3) MB, 3551.0 / 0.0 ms  (average mu = 0.370, current mu = 0.462) allocation failure scavenge might not succeed
[4562:0x103e3b000]   170945 ms: Mark-sweep 2041.8 (2051.5) -> 2041.2 (2051.5) MB, 8225.9 / 0.2 ms  (average mu = 0.253, current mu = 0.148) allocation failure GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x10072e699]
Security context: 0x3ecf281008a1 <JSObject>
    1: createElement(aka createElement) [0x3ecf3bee16f9] [/Users/pater/Desktop/personal-blog/node_modules/react/cjs/react.development.js:~727] [pc=0x1d716fb9bc21](this=0x3ecfe42004a9 <undefined>,0x3ecffb609dc1 <String[#3]: div>,0x3ecfe4f40389 <Object map = 0x3ecfdd48e531>,0x3ecfe42004a9 <undefined>)
    2: arguments adaptor frame: 2->3
    3: createElement...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200424.120915.4562.0.001.json
Node.js report completed
 1: 0x100b6a52a node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x100081f70 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x100082098 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x10017461d v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1001745c7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x10028a569 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 7: 0x10028b8ee v8::internal::Heap::MarkCompactPrologue() [/usr/local/bin/node]
 8: 0x1002894eb v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x100287f93 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x10028f6da v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x10028fbd0 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10026d8c6 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [/usr/local/bin/node]
13: 0x1004bc90e v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x10072e699 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
15: 0x1d716fb9bc21 
Abort

[timneutkens]

The simplest way that you could cause this is if you're rendering a component inside of that component.

For example

// This will cause an infinite loop and potential memory leak
function MyComponent() {
  return <MyComponent />
}

[naseef0]

@timneutkens I cross checked my whole code.. there is no infinite loop code like this