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

fix: better sheet and dynamic rules management, leverage useInsertionEffect and support React 18 #1604

Merged
merged 9 commits into from
Apr 15, 2022

Conversation

enisdenjo
Copy link
Member

@enisdenjo enisdenjo commented Mar 17, 2022

Corresponding Issue(s):

Closes #1597, starting point was #1598

What Would You Like to Add/Fix?

React 18 StrictMode runs each useEffect twice. This is done for a good reason where components experience this behaviour in production environments regularly.

Without this fix, the UI will break where components rerender fast. (See examples in #1597).

This fix makes sure the dynamic styles are loaded after the sheet was managed.

Todo

  • Add test(s) that verify the modified behavior
  • Add documentation if it changes public API

@enisdenjo enisdenjo requested a review from kof as a code owner March 17, 2022 16:46
@kof
Copy link
Member

kof commented Mar 17, 2022

Looking good, gonna have a deeper look soon, in the meantime anybody could try this on a large codebase and let me know if it breaks anything?

@enisdenjo
Copy link
Member Author

I've recently deployed this patch to a very complex and big React 18 enabled app, leveraging all benefits of modern React - it works flawlessly as of time of writing.

Sadly, I am not deep into react-jss to prove the fix with tests, but I hope others upgrading React will find this PR and help nurture it. 😄

@kof
Copy link
Member

kof commented Mar 18, 2022

This is evtl not testable with tests without going into internals, which isn't a great idea

@enisdenjo enisdenjo changed the title fix: separate sheet and dynamic rules effects (support React 18) fix: separate sheet and dynamic rules effects, use useInsertionEffect and support React 18 Mar 31, 2022
@enisdenjo
Copy link
Member Author

Now using the new useInsertionEffect, as recommended by the React Team, together with a few more improvements and simplifications.

@enisdenjo enisdenjo changed the title fix: separate sheet and dynamic rules effects, use useInsertionEffect and support React 18 fix: better sheet and dynamic rules management, leverage useInsertionEffect and support React 18 Mar 31, 2022
@kof
Copy link
Member

kof commented Mar 31, 2022

nice!

@semihraifgurel
Copy link

Will the request be accepted soon?

@georgiosApo
Copy link

Hyped for this 👏 Nice work! Hopefully this passes review.

@georgiosApo
Copy link

nice!

Hey @kof, sorry to bother. Is this PR still on your todo-list perhaps?
It has been a couple of weeks and I'm saddened that I can't use one of my favourite tools with the latest version of React.

Thanks a bunch for developing an amazing lib!

@kof
Copy link
Member

kof commented Apr 15, 2022

Sorry for the delay, will release it today

@kof kof merged commit 3a7ddc3 into cssinjs:master Apr 15, 2022
@kof
Copy link
Member

kof commented Apr 15, 2022

I was a bit too optimistic, just ran the tests locally and some are failing, can you fix them please? Feel free to send a separate PR

@enisdenjo
Copy link
Member Author

enisdenjo commented Apr 15, 2022

I ran the tests too and got a bunch of Error: Can't resolves. I don't think they are caused by this PR, or?

Maybe the problem is on my side, can you share the specific tests failing or whether I am doing something wrong?

@enisdenjo
Copy link
Member Author

My bad, had to yarn build. Will be inspecting the tests.

@enisdenjo
Copy link
Member Author

All tests pass #1608.

@semihraifgurel
Copy link

When will the new version be released?

@kof
Copy link
Member

kof commented Apr 24, 2022

released as v10.9.1-alpha.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

react-jss Dynamic values not work with react 18 new api
4 participants