Incredible lag in recent versions #3300

Nantris · 2024-12-19T18:14:41Z

Current behavior:

Latest versions of one or more @emotion packages causes incredible CPU usage and lag.

Previously we couldn't upgrade @emotion/babel-plugin due to this issue: #3192

We're no longer facing that problem, but instead we're seeing the app become virtually unusable and CPU usage saturating a core whenever Emotion has any work to do.

Based on the commit date of our problem commit (where we upgraded the packages) this must have occurred prior to 11.14.0 - I'm guessing in 11.13.5

To reproduce:

Unknown exactly how to reproduce - but the issue is produced by using the versions of Emotion seen below with the - in front of the line. The + lines are the working versions, taken from our yarn.lock

diff --git a/yarn.lock b/yarn.lock
index 2828e80f3..fdd433b00 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2689,22 +2689,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.13.5":
-  version: 11.13.5
-  resolution: "@emotion/babel-plugin@npm:11.13.5"
+"@emotion/babel-plugin@npm:^11.12.0":
+  version: 11.12.0
+  resolution: "@emotion/babel-plugin@npm:11.12.0"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.16.7"
     "@babel/runtime": "npm:^7.18.3"
     "@emotion/hash": "npm:^0.9.2"
     "@emotion/memoize": "npm:^0.9.0"
-    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/serialize": "npm:^1.2.0"
     babel-plugin-macros: "npm:^3.1.0"
     convert-source-map: "npm:^1.5.0"
     escape-string-regexp: "npm:^4.0.0"
     find-root: "npm:^1.1.0"
     source-map: "npm:^0.5.7"
     stylis: "npm:4.2.0"
-  checksum: 10c0/8ccbfec7defd0e513cb8a1568fa179eac1e20c35fda18aed767f6c59ea7314363ebf2de3e9d2df66c8ad78928dc3dceeded84e6fa8059087cae5c280090aeeeb
+  checksum: 10c0/930ff6f8768b0c24d05896ad696be20e1c65f32ed61fb5c1488f571120a947ef0a2cf69187b17114cc76e7886f771fac150876ed7b5341324fec2377185d6573
   languageName: node
   linkType: hard
 
@@ -2727,29 +2727,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.13.5, @emotion/cache@npm:^11.4.0":
-  version: 11.13.5
-  resolution: "@emotion/cache@npm:11.13.5"
+"@emotion/cache@npm:^11.13.0, @emotion/cache@npm:^11.4.0":
+  version: 11.13.1
+  resolution: "@emotion/cache@npm:11.13.1"
   dependencies:
     "@emotion/memoize": "npm:^0.9.0"
     "@emotion/sheet": "npm:^1.4.0"
-    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/utils": "npm:^1.4.0"
     "@emotion/weak-memoize": "npm:^0.4.0"
     stylis: "npm:4.2.0"
-  checksum: 10c0/fc669bf2add27ddff7b1f341b54e7124379156285095f0b38fb846efe90c64c70d2826f73bc734358a4fce04578229774a38ff4de2599d286461bfca57ba7d23
+  checksum: 10c0/321e97d8980885737de13b47e41fd4febfbd83086f10c620f865fcbddb29b8fe198adec7e1c69cc7b137638ea9242d7c475c57f954f7ca229157fa92e368f473
   languageName: node
   linkType: hard
 
 "@emotion/css@npm:~11.13.0":
-  version: 11.13.5
-  resolution: "@emotion/css@npm:11.13.5"
+  version: 11.13.4
+  resolution: "@emotion/css@npm:11.13.4"
   dependencies:
-    "@emotion/babel-plugin": "npm:^11.13.5"
-    "@emotion/cache": "npm:^11.13.5"
-    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/cache": "npm:^11.13.0"
+    "@emotion/serialize": "npm:^1.3.0"
     "@emotion/sheet": "npm:^1.4.0"
-    "@emotion/utils": "npm:^1.4.2"
-  checksum: 10c0/45d444b08c1a9776046786f1ad8b93297d9e0fb79e6a40b73e9f9c5c20a071f83bae2408e7b98fe526fc123774a18b12ae3c8dc5b5883b8169685ee7b8df9463
+    "@emotion/utils": "npm:^1.4.0"
+  checksum: 10c0/57971732b983f43e642e30496257168d5ecdd05be4d4a3cd7ff778f9e402a71fd8679272cb797abd61eab65724dad26af04c418a41219a062b8faa9cc01d3848
   languageName: node
   linkType: hard
 
@@ -2852,15 +2852,15 @@ __metadata:
   linkType: hard
 
 "@emotion/react@npm:^11.11.0, @emotion/react@npm:^11.8.1, @emotion/react@npm:~11.13.1":
-  version: 11.13.5
-  resolution: "@emotion/react@npm:11.13.5"
+  version: 11.13.3
+  resolution: "@emotion/react@npm:11.13.3"
   dependencies:
     "@babel/runtime": "npm:^7.18.3"
-    "@emotion/babel-plugin": "npm:^11.13.5"
-    "@emotion/cache": "npm:^11.13.5"
-    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/cache": "npm:^11.13.0"
+    "@emotion/serialize": "npm:^1.3.1"
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0"
-    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/utils": "npm:^1.4.0"
     "@emotion/weak-memoize": "npm:^0.4.0"
     hoist-non-react-statics: "npm:^3.3.1"
   peerDependencies:
@@ -2868,20 +2868,20 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/16b4810bc68c619cb25145e543880e905fc99332bacc1c39b20c913b2e6130289d9acd909abba55820fa796c5cca3cade6fe79a26b3ab7e4e2d040c61ee14a6e
+  checksum: 10c0/a55e770b9ea35de5d35db05a7ad40a4a3f442809fa8e4fabaf56da63ac9444f09aaf691c4e75a1455dc388991ab0c0ab4e253ce67c5836f27513e45ebd01b673
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.1.1, @emotion/serialize@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "@emotion/serialize@npm:1.3.3"
+"@emotion/serialize@npm:^1.1.1, @emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0, @emotion/serialize@npm:^1.3.1":
+  version: 1.3.2
+  resolution: "@emotion/serialize@npm:1.3.2"
   dependencies:
     "@emotion/hash": "npm:^0.9.2"
     "@emotion/memoize": "npm:^0.9.0"
     "@emotion/unitless": "npm:^0.10.0"
-    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/utils": "npm:^1.4.1"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/b28cb7de59de382021de2b26c0c94ebbfb16967a1b969a56fdb6408465a8993df243bfbd66430badaa6800e1834724e84895f5a6a9d97d0d224de3d77852acb4
+  checksum: 10c0/b4873b643721d28b4450f9d77b71e6c8d0109e6825c54fc79e649d2fa438fe4080d2fa696ec8fda421b8e713fcd42306d6197b6121ddd2486ffab8e4b6311ce0
   languageName: node
   linkType: hard
 
@@ -2893,22 +2893,22 @@ __metadata:
   linkType: hard
 
 "@emotion/styled@npm:^11.11.0, @emotion/styled@npm:~11.13.0":
-  version: 11.13.5
-  resolution: "@emotion/styled@npm:11.13.5"
+  version: 11.13.0
+  resolution: "@emotion/styled@npm:11.13.0"
   dependencies:
     "@babel/runtime": "npm:^7.18.3"
-    "@emotion/babel-plugin": "npm:^11.13.5"
+    "@emotion/babel-plugin": "npm:^11.12.0"
     "@emotion/is-prop-valid": "npm:^1.3.0"
-    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/serialize": "npm:^1.3.0"
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0"
-    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/utils": "npm:^1.4.0"
   peerDependencies:
     "@emotion/react": ^11.0.0-rc.0
     react: ">=16.8.0"
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/18d3e38482f92c93446fbfe46e3ca2b182f228f3317ca23f9bd69ddc313bacabf8ecf4d7e720e9aa492bd651cb0b8f87196547bd136666ef50287c414cd36936
+  checksum: 10c0/5e2cc85c8a2f6e7bd012731cf0b6da3aef5906225e87e8d4a5c19da50572e24d9aaf92615aa36aa863f0fe6b62a121033356e1cad62617c48bfdaa2c3cf0d8a4
   languageName: node
   linkType: hard
 
@@ -2928,10 +2928,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:^1.4.2":
-  version: 1.4.2
-  resolution: "@emotion/utils@npm:1.4.2"
-  checksum: 10c0/7d0010bf60a2a8c1a033b6431469de4c80e47aeb8fd856a17c1d1f76bbc3a03161a34aeaa78803566e29681ca551e7bf9994b68e9c5f5c796159923e44f78d9a
+"@emotion/utils@npm:^1.4.0, @emotion/utils@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "@emotion/utils@npm:1.4.1"
+  checksum: 10c0/f4704e0bdf48062fd6eb9c64771c88f521aab1e108a48cb23d65b6438597c63a6945301cef4c43611e79e0e76a304ec5481c31025ea8f573d7ad5423d747602c
   languageName: node
   linkType: hard

Expected behavior:

Upgrades should not add meaningful lag to the application.

Without the problem present

You can see serializeStyles takes some small CPU and murmur2 uses hardly any

With the problem present

serializeStyles and murmur2 eat CPU cycles

I tried upgrading all versions to the latest. I made sure I only had one version of each Emotion subpackage as best I could (eg @emotion/hash, @emotion/memoize, etc) and as far as I can tell I only had one of each.

I noticed when I upgrade everything to the latest, I no longer face #3192, but I wonder if perhaps it's been transmuted into this new problem?

Environment information:

react version: 18.2.0
@emotion/react version: 11.14.0

The text was updated successfully, but these errors were encountered:

Andarist · 2024-12-23T23:46:40Z

Would it be possible for me to get access to your code anyhow or sync on a call in the new year? It's extremely hard to diagnose this without being able to test things out myself in the affected codebase.

p4privacy · 2024-12-26T16:12:44Z

ok

Nantris · 2025-01-03T01:10:41Z

@Andarist thank you for your reply and my apologies for the delay getting back to you.

I can't directly share the code but I'd be happy to try to find a workable approach to allow you access via a remote desktop or something of that sort.

Currently I've locked us on these versions as a workaround (Unfortunately we're also working around #3192, which makes it very hard to pinpoint exactly which dependency and version introduced the problem):

    "@emotion/babel-plugin": "11.10.8",
    "@emotion/css": "11.13.4",
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",

Andarist · 2025-01-03T06:29:26Z

Could we schedule a call to take a look at this together?

Nantris · 2025-01-04T02:17:28Z

Certainly, and I appreciate your time on this @Andarist!

I have a few fires to fight following time off from the holidays, but I can email you to set something up next week at the email list on your profile. Does that sound good?

Thank you again!

Nantris · 2025-01-04T02:56:25Z

Some additional findings today. I ran yarn dedupe on our monorepo to resolve a separate problem and it upgraded some disparate versions from/to:

@emotion/utils: 1.4.1 >> 1.4.2
@emotion/serialize: 1.3.2 >> 1.3.3

And the problem seems to occur after these are upgraded.

Notes:

This is separate from my test case above where I'm sure I only had one version of these.
My testing here is much more limited than when I initially reported the problem

Andarist · 2025-01-12T11:03:26Z

but I can email you to set something up next week at the email list on your profile. Does that sound good?

yeah, that works

Nantris added bug needs triage labels Dec 19, 2024

Nantris mentioned this issue Dec 19, 2024

@emotion/babel-plugin 11.11.x causes error: "Unexpected falsy value: undefined" #3192

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incredible lag in recent versions #3300

Incredible lag in recent versions #3300

Nantris commented Dec 19, 2024 •

edited

Loading

Andarist commented Dec 23, 2024

p4privacy commented Dec 26, 2024

Nantris commented Jan 3, 2025

Andarist commented Jan 3, 2025

Nantris commented Jan 4, 2025 •

edited

Loading

Nantris commented Jan 4, 2025 •

edited

Loading

Andarist commented Jan 12, 2025

Incredible lag in recent versions #3300

Incredible lag in recent versions #3300

Comments

Nantris commented Dec 19, 2024 • edited Loading

Andarist commented Dec 23, 2024

p4privacy commented Dec 26, 2024

Nantris commented Jan 3, 2025

Andarist commented Jan 3, 2025

Nantris commented Jan 4, 2025 • edited Loading

Nantris commented Jan 4, 2025 • edited Loading

Andarist commented Jan 12, 2025

Nantris commented Dec 19, 2024 •

edited

Loading

Nantris commented Jan 4, 2025 •

edited

Loading

Nantris commented Jan 4, 2025 •

edited

Loading