refactor(checkout): CHECKOUT-9386 Convert CreditCardPaymentMethodComponent #2530
Conversation
|
|
||
| private getCreditCardPaymentMethodDerivedProps(): CreditCardPaymentMethodDerivedProps { | ||
| const { checkoutService, checkoutState, isUsingMultiShipping = false, method } = this.props; | ||
| useEffect(() => { |
There was a problem hiding this comment.
I’ve used three separate useEffect() hooks here, each handling a different existing concern componentDidMount, componentDidUpdate, and componentWillUnmount.
Merging them into a single useEffect() would blur the distinction between dependencies and lifecycle behaviors.
However, I’m happy to merge them if we think that’s prefered. ⏩️
| } | ||
| }; | ||
|
|
||
| void deInit(); |
There was a problem hiding this comment.
I have created init(), reInit() and deInit() inside hooks.
Using explicit names makes their purpose clearer.
We may need to align on a consistent naming for these methods. ⏩️
bc-peng
force-pushed
the
CreditCardPaymentMethodComponent
branch
2 times, most recently
from
dc3c6c8 to
1d46946
Compare
bc-peng
force-pushed
the
CreditCardPaymentMethodComponent
branch
from
1d46946 to
ebb9996
Compare
| }, [method, selectedInstrumentId, isAddingNewCard]); | ||
|
|
||
| useEffect(() => { | ||
| return () => { |
There was a problem hiding this comment.
Can this be a return from the effect that initialises the component?
There was a problem hiding this comment.
Sure, I have combined both hooks into one useEffect().
|
checkout-js deployed to Integration US |
|
checkout-js deployed to Staging US |
|
checkout-js deployed to Production US |
What/Why?
Convert class component
CreditCardPaymentMethodComponentinto 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.