Performance issue using Preact and 1.0.0-rc.3

Bug report

Describe the bug

I met this problem when using next.js with preact and 1.0.0-rc.(1|2|3). Everything works in dev mode but when the app is built and run in production mode, the page takes a very long time to load.

To reproduce

I’ve build an demo for this problem.

1. npm i
2. npm run build
3. npm start
4. Open http://localhost:3000

Minimal reproduction

https://github.com/rjyo/demo-preact-chakraui

Expected behavior

N/A

Screenshots

A simple page with 6 text Input took several seconds before page loaded.

System information

• OS: macOS Catalina 10.15.6
• Browser (if applies): Chrome
• Version of @chakra-ui/core: 1.0.0-rc.3
• Version of Node.js: v12.18.0

Additional context

I know Preact many not be officially supported. Hope you guys have some time to look into this.

How I found this

Comparing 2 simple “Terms of Usage” pages (mostly displaying text), one build with Chakra-UI 0.8 + Preact, another with Chakra-UI rc.3 + React, the score of Google PageSpeed Insights went down quite a lot. More specifically, the Total Blocking Time almost doubled. I thought it could be React’s performance problem but found Chakra-UI rc.3 + Preact doesn’t even work anymore.

[ljosberinn]

https://github.com/emotion-js/emotion/pull/896 that will probably explain it 😅 preact is not supported by emotion, should’ve searched earlier, oh well. At least we found that other issue because of this rabbit hole.

[ljosberinn]

I can confirm it is indeed very slow. Now the interesting part:

• importing this into _app.tsx for debugging reasons, which effectively just enables preact devtools in prod fixes it.

if (typeof window !== 'undefined') {
  require('preact/debug')
}

Obviously that can’t be the solution, so I also added @zeit/next-source-maps to the next.config.js. Using chromes Performance tab, I could track down the issue: useStyleConfig using lodash.merge.

In your case, its twice as bad because youre passing a theme thats the default theme, which we then merge… with the default theme. I think we can omit that merge process just by comparing those.

Merging the theme with itself isn’t horribly unperformant actually, but as you can see here, each useStyleConfig('Form', ...) takes ages. Really weird behaviour considering this only happens with Preact.

Digging some more and will update.

Edit: sadly cant compare outerTheme === theme in theme provider. but you shouldnt pass the default theme anyways, so that would be user error anyways. and 4ms isnt too bad.

Edit 2: found it 🎉 I think

Edit 3: yep.

https://github.com/chakra-ui/chakra-ui/blob/develop/packages/system/src/use-style-config.ts#L30 rest contains children. merge deepmerges. using omit(rest, 'children') reduces repeated executions to <1 ns again. Will file a PR!

Still no clue how this only happens in Preact though but oh well, this will be a perf improvement for everyone.