-
-
Notifications
You must be signed in to change notification settings - Fork 8.8k
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
refactor(core): replace useDocusaurusContext().isClient by useIsBrowser() #5349
Conversation
✔️ [V2] 🔨 Explore the source changes: 630f019 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6115471f1c33c30008353efa 😎 Browse the preview: https://deploy-preview-5349--docusaurus-2.netlify.app |
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5349--docusaurus-2.netlify.app/ |
Size Change: +403 B (0%) Total Size: 794 kB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's awesome!
thanks 😄 Comparing before/after on lighthouse for a very large page seems to have a significant impact on blocking time / TTI: Before: https://deploy-preview-5345--docusaurus-2.netlify.app/community/changelog/ After: https://deploy-preview-5349--docusaurus-2.netlify.app/community/changelog/ Going to merge this as I didn't see any weird |
Breaking change:
useDocusaurusContext().isClient
by newuseIsBrowser()
Motivation
Perf reasons:
isClient
is toggled after React hydration, leading to a duplicate re-rendering of all components usinguseDocusaurusContext()
, even if they don't even use theisClient
value.By extracting
isClient
in a separate context, only components reading that value will render twice on hydration, and the rest will just render once => less work for the browser and better perfs.More explanations on the problem space here: https://www.joshwcomeau.com/react/the-perils-of-rehydration/
Naming reasons: we have
<BrowserOnly>
(and not<ClientOnly>
) so we'd rather keep a consistent naming for things that happen after React hydrationAlso, remove some unexpected usage of
isClient
as key: we'll see if it produce unintended side-effects.Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
tests + preview