Sync color mode prior to subscribing in ThemeProvider #4039
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 4b33f0f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
mattcosta7
changed the title
size-limit report 📦
|
joshblack
approved these changes
Dec 11, 2023
|
gh/gh integration tests are 🟢 |
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
related to https://github.com/github/primer/issues/2927
Changelog
Ensure theme syncs between initial render and setting up listeners in useEffect. This should handle the unlikely but possible scenario that in between initial render and the effect, the user's preference for theme color has changed. This team is not large, but potentially happens for users who use automatic theme switching based on time/schedule
New
Changed
ThemeProvider setColorMode gets called when setting up subscription
Removed
Rollout strategy
Testing & Reviewing
It's not super straightforward to validate, but generally, when setting up subscriptions in an efffect, it's important to ensure that the time between render and the effect was accounted for.
In this case, I believe that occasionally when this effect occurs far enough after that initial render, the match state can change prior to listening to the change event, leading to some ui tearing.
see:
useSyncExternalStore's shim implementation (which is basically a subscription to an event) - https://github.com/facebook/react/blob/40f653d13c363c6f81b13de67ce391991fb1f870/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L103-L122Merge checklist