refactor(checkout): CHECKOUT-9386 Convert HostedWidgetPaymentComponent #2562
Conversation
| @@ -2,6 +2,7 @@ | |||
| "extends": ["../../.eslintrc.json"], | |||
| "rules": { | |||
| "@typescript-eslint/no-unsafe-call": "off", | |||
| "@typescript-eslint/no-unnecessary-condition": "off" | |||
| "@typescript-eslint/no-unnecessary-condition": "off", | |||
| "react-hooks/exhaustive-deps": "off" | |||
There was a problem hiding this comment.
Is it better to ignore a rule when necessary than to ignore it for the whole package?
There was a problem hiding this comment.
@vitalii-koshovyi Thanks for reviewing my PRs.
The react-hooks/exhaustive-deps rule is a bit special. We’ve already disabled it in several packages (e.g., core, braintree-integration) because, in our context, useEffect often can’t depend on all variables without causing unexpected re-renders.
I’m thinking it might make sense to open a PR to disable this rule project-wide, since it’s already off in major packages.
checkout-js/packages/core/.eslintrc.json
Line 18 in 0529684
cc @animesh1987
There was a problem hiding this comment.
For packages we should have the rules in one place for better tracking, rather than in individual files.
There was a problem hiding this comment.
Plus what @bc-peng said, the shared payment methods have quite a bit of variance per method that cause different behaviours.
|
A summary of the changes today:
|
What/Why?
Convert class component
HostedWidgetPaymentComponentinto function component.Replacing class components with function components eliminates the need for traditional lifecycle methods and enables full adoption of React 18 features like hooks and concurrent rendering.
This modernization aligns with React’s roadmap and ensures greater compatibility with future updates.
Rollout/Rollback
Revert.
Testing
CI.
Manual Testing
Mollie CC
test.mov
Stripe CC
Screen.Recording.2025-09-09.at.17.23.13.mov