-
Notifications
You must be signed in to change notification settings - Fork 69
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
Only request WooPay session once on Blocks pages #7393
Only request WooPay session once on Blocks pages #7393
Conversation
Update import path
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
Size Change: +65 B (0%) Total Size: 1.42 MB
ℹ️ 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.
This tested really well for me! I was able to confirm that not only did it limit the get woopay session calls to one, it logically also only loaded the connect iframe from WooPay once as well. This is a huge win for performance / wasted requests! I also confirmed that the first party flow worked for all pages and I was able to complete checkout in each case.
I left two small questions around the updates, but neither one is blocking just wanted to get a better understanding of how this code might fail.
LGTM!
Fixes #7357.
Changes proposed in this Pull Request
It changes the way the WooPay button is rendered in the Blocks cart and checkout pages. We're adopting a ReactDOM render approach instead of simply rendering the component to prevent the component re-rendering, that was how multiple requests were being made.
The new approach creates a raw HTML node, and a new root through ReactDOM, then the new root is rendered in the node a single time, and the request is made only once.
Testing instructions
develop
, runnpm start
to build the assets and try to reproduce the steps described on Get WooPay Session is called multiple times on Blocks Cart and Checkout #7357.npm start
to rebuild the assets.5.1. Monitor the Network tab in dev tools to confirm the request
wcpay_get_woopay_session
is made only once in each page.npm run changelog
to add a changelog file, choosepatch
to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge