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

perf(core): use React 18 startTransition for hydration #9051

Merged

Conversation

sanjaiyan-dev
Copy link
Contributor

This pull request introduces time-slicing using the startTransition API in order to enhance the performance of hydration and prevent it from blocking the main thread for extended periods, particularly for users who promptly initiate scrolling actions.

Inspired by the implementation found in Next.js, this enhancement aims to provide a smoother user experience by prioritizing interactivity and responsiveness during the hydration process.

Please review this pull request and provide any feedback or suggestions. Thank you!

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 8, 2023
@netlify
Copy link

netlify bot commented Jun 8, 2023

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 987a92f
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/648236562f0905000894ee66
😎 Deploy Preview https://deploy-preview-9051--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link

github-actions bot commented Jun 8, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 64 🟢 97 🟢 92 🟢 100 🟠 89 Report
/docs/installation 🟠 76 🟢 100 🟢 92 🟢 100 🟠 89 Report

@slorber slorber changed the title Enhance Hydration Performance with Time-Slicing and startTransition 🚀 feat: use React 18 startTransition for hydration Jun 9, 2023
@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Jun 9, 2023
@slorber
Copy link
Collaborator

slorber commented Jun 9, 2023

Thanks

Remix also does this, and I noticed to add this later but apparently it's working as is so LGTM 👍

https://github.com/remix-run/remix/blob/72d73772e9a4bd773e6f60985a558201257c2c7d/templates/arc/app/entry.client.tsx

@slorber slorber merged commit 6102a5a into facebook:main Jun 9, 2023
@Josh-Cena Josh-Cena added pr: performance This PR does not add a new behavior, but existing behaviors will be more memory- / time-efficient. and removed pr: new feature This PR adds a new API or behavior. labels Jun 9, 2023
@Josh-Cena Josh-Cena changed the title feat: use React 18 startTransition for hydration perf(core): use React 18 startTransition for hydration Jun 9, 2023
@sanjaiyan-dev sanjaiyan-dev deleted the sanjaiyan-optimization-react18 branch June 9, 2023 10:51
This was referenced Oct 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: performance This PR does not add a new behavior, but existing behaviors will be more memory- / time-efficient.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants