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

fix(react): hub listener fix #2183

Merged
merged 20 commits into from
Jul 18, 2022
Merged

fix(react): hub listener fix #2183

merged 20 commits into from
Jul 18, 2022

Conversation

wlee221
Copy link
Contributor

@wlee221 wlee221 commented Jun 23, 2022

Description of changes

This PR ensures that Authenticator correctly attaches and reattaches hub listener on React 18 StrictMode.

Problem

In React 18 StrictMode, React will always simulate unmounting and remounting whenever components initializes. This persist states and refs between the remounts:

On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back [...].

This broke the hub listener pattern we used in React, because we've been expecting ref value to be reset between remounts.

Fix

This PR fixes by this by not using useRef at all. Even if component were to remount, it'll reattach immediately.

Issue #, if available

Description of how you validated changes

Verified manually on @experimental tag. Added some unit test as well.

Checklist

  • PR description included
  • yarn test passes
  • Tests are updated
  • No side effects or sideEffects field updated
  • Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@changeset-bot
Copy link

changeset-bot bot commented Jun 23, 2022

🦋 Changeset detected

Latest commit: 0550a95

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@aws-amplify/ui-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wlee221 wlee221 temporarily deployed to ci June 23, 2022 16:59 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 16:59 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 16:59 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 16:59 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 18:22 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 18:22 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 18:22 Inactive
@wlee221 wlee221 temporarily deployed to ci June 23, 2022 18:22 Inactive
Comment on lines 8 to 11
jest.mock('@aws-amplify/ui', () => ({
...(jest.requireActual('@aws-amplify/ui') as {}),
defaultAuthHubHandler: jest.fn(),
}));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this,

const hubHandlerSpy = jest.spyOn(UI, 'defaultAuthHubHandler');

fails with

TypeError: Cannot redefine property: defaultAuthHubHandler

event: 'tokenRefresh',
});

expect(hubHandlerSpy).toHaveBeenCalledTimes(1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been failing due to

    Expected number of calls: 1
    Received number of calls: 0

but I could verify the function does get called. Looks like jest is not correctly mocking it?

@wlee221 wlee221 temporarily deployed to ci June 30, 2022 18:01 Inactive
@wlee221 wlee221 temporarily deployed to ci June 30, 2022 18:01 Inactive
@wlee221 wlee221 temporarily deployed to ci June 30, 2022 18:01 Inactive
@wlee221 wlee221 temporarily deployed to ci June 30, 2022 18:01 Inactive
@wlee221 wlee221 marked this pull request as ready for review June 30, 2022 18:34
@wlee221 wlee221 requested a review from a team as a code owner June 30, 2022 18:34
(data) => {
handler(data, service);
},
'authenticator-hub-handler'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the hub handler name; added mostly for debugging purposes.

@wlee221 wlee221 requested review from calebpollman and ErikCH June 30, 2022 19:59
@wlee221 wlee221 temporarily deployed to ci July 1, 2022 19:06 Inactive
@wlee221 wlee221 temporarily deployed to ci July 1, 2022 19:06 Inactive
@wlee221 wlee221 temporarily deployed to ci July 1, 2022 19:06 Inactive
@wlee221 wlee221 temporarily deployed to ci July 1, 2022 19:06 Inactive
Copy link
Member

@calebpollman calebpollman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚢

@calebpollman calebpollman temporarily deployed to ci July 14, 2022 10:42 Inactive
@calebpollman calebpollman temporarily deployed to ci July 14, 2022 10:42 Inactive
@calebpollman calebpollman temporarily deployed to ci July 14, 2022 10:42 Inactive
@calebpollman calebpollman temporarily deployed to ci July 14, 2022 10:42 Inactive
Copy link
Contributor

@ErikCH ErikCH left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wlee221 wlee221 merged commit f52ac10 into main Jul 18, 2022
@wlee221 wlee221 deleted the hub-listener-fix branch July 18, 2022 18:55
@github-actions github-actions bot mentioned this pull request Jul 18, 2022
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.

3 participants