Skip to content

fix(react): convert GooglePayButton to functional component for React 19 compatibility#393

Open
hanumanteshvar07-design wants to merge 2 commits into
google-pay:fix/react19-compat-testfrom
hanumanteshvar07-design:fix/react19-compat-test
Open

fix(react): convert GooglePayButton to functional component for React 19 compatibility#393
hanumanteshvar07-design wants to merge 2 commits into
google-pay:fix/react19-compat-testfrom
hanumanteshvar07-design:fix/react19-compat-test

Conversation

@hanumanteshvar07-design
Copy link
Copy Markdown

This PR resolves the compatibility issue with React 19 where accessing .ref on a React element was deprecated and now throws a warning/error.

By converting GooglePayButton to a functional component using React.forwardRef, we align with modern React patterns and ensure that ref is handled correctly as a prop, avoiding the legacy class-component behavior that triggers React 19 warnings.

Changes:

src/button-react/GooglePayButton.tsx: Converted to a functional component with React.forwardRef.
src/button-react/GooglePayButton.test.tsx: Updated to support both legacy ReactDOM.render and the modern createRoot API.
src/button-react/GooglePayButton.react19.test.tsx: Enhanced to include regression tests for React 19 ref access patterns.
Formatting: Normalized codebase formatting using Prettier to satisfy linting rules.

Verification:

All 49 tests passed (including core logic, web component, and React components).
Verified compatibility with both React 16 and React 19 environments.
npm run lint passes successfully.

@google-cla
Copy link
Copy Markdown

google-cla Bot commented Apr 21, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant