Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles created multiple times when using function values #1361

Open
sergnek opened this issue Jul 3, 2020 · 8 comments
Open

Styles created multiple times when using function values #1361

sergnek opened this issue Jul 3, 2020 · 8 comments
Labels
bug It went crazy and killed everyone. help wanted important The thing you do when you wake up! perf

Comments

@sergnek
Copy link

sergnek commented Jul 3, 2020

Expected behavior:
Duplicate styles shouldn't be created.

Describe the bug:
On every component render, in which useStyles prop changes, new duplicate styles are created. I've managed to reproduce the bug in Codesandbox. To see it:

  1. Open codesandbox link from below
  2. Inspect red text element and see styles applied
  3. Click on button few times to cause component re-render
  4. Inspect some another element on the page and the red text again.
  5. Notice duplicate styles
    The styles are duplicated only for elements styled with css selector. If you check styles on the element with container class, you'll see there is no duplication there.

Codesandbox link:
https://codesandbox.io/s/react-jss-playground-7ftrs?file=/index.js

Versions (please complete the following information):

  • jss: 10.1.1
  • Browser [e.g. chrome, safari]: any
  • OS [e.g. Windows, macOS]: any

79044719-7820f180-7c0f-11ea-9134-42442b8c84af

@qhxin
Copy link

qhxin commented Jul 6, 2020

same issue: #1360

@LAKnoKAL
Copy link

LAKnoKAL commented Jul 21, 2020

same for "^10.3.0".
#1360 is more about Firefox, this one actually represents that issue related to all browsers/OS.
Also material-ui not involved

@half-halt
Copy link

I have a change i've been with messing with that should address this, and make createUseStyles / useStyle work in concurrent mode, If you want to try it.

@vlazh
Copy link

vlazh commented Aug 13, 2020

I have run the same issue. It seems like the problem with Function rules (jss-plugin-rule-value-function) and any nested rules (jss-plugin-nested)

@tokiroto
Copy link

Same problem here. Any solution yet?

@just-Bri
Copy link

Been experiencing the same issue, dropping a +1 on this.
Been noticing performance impact from this.

@naripok
Copy link

naripok commented Oct 31, 2020

This is a major concern on my application.
I see the issue is resolved on #1360, but not merged because of a CI config problem. D=
If someone can address the merge issue, I'll be forever in debt.

@just-Bri
Copy link

This is a major concern on my application.
I see the issue is resolved on #1360, but not merged because of a CI config problem. D=
If someone can address the merge issue, I'll be forever in debt.

It looks like they just need to update the test snapshots to reflect the new code

@kof kof added bug It went crazy and killed everyone. help wanted important The thing you do when you wake up! labels Apr 26, 2021
@kof kof added the perf label Aug 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug It went crazy and killed everyone. help wanted important The thing you do when you wake up! perf
Projects
None yet
Development

No branches or pull requests

9 participants