Incredible lag in recent versions
Opened this issue · 0 comments
Nantris commented
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:
reactversion: 18.2.0@emotion/reactversion: 11.14.0