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.

Sign up for GitHub

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

Jump to bottom

fix(elements): Errant renders upon sign-in completion #4225

Closed
wants to merge 11 commits into from
Closed

fix(elements): Errant renders upon sign-in completion #4225

wants to merge 11 commits into from

Conversation

tmilewski
Copy link
Member

Description

TODO

Fixes SDKI-144

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@tmilewski tmilewski self-assigned this Sep 25, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Sep 25, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: aa8e5f7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

tmilewski
tmilewski commented Sep 25, 2024
View reviewed changes
packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx
@@ -146,34 +144,28 @@ export default function SignInPage() {
<CustomProvider provider='google'>Continue with Google</CustomProvider>
</div>

{continueWithEmail ? (
Copy link
Member Author

Choose a reason for hiding this comment

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

Just cleaning this up.

tmilewski
tmilewski commented Sep 25, 2024
View reviewed changes
packages/elements/src/internals/machines/sign-in/router.machine.ts
@@ -426,7 +410,11 @@ export const SignInRouterMachine = setup({
},
'FORM.ATTACH': {
description: 'Attach/re-attach the form to the router.',
actions: enqueueActions(({ enqueue, event }) => {
actions: enqueueActions(({ context, enqueue, event }) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Ensuring we don't attach a new formRef, and ultimately re-render, if it's not necessary.

tmilewski
tmilewski commented Sep 25, 2024
View reviewed changes
packages/elements/src/internals/machines/sign-in/router.machine.ts
enqueue.raise({ type: 'NEXT', resource: event.output });
}),
resetResource: assign({ resource: ({ context }) => context.clerk.client.signIn }),
setResource: assign({
Copy link
Member Author

Choose a reason for hiding this comment

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

Rely on the returned SIA resource, over client.signIn

tmilewski
tmilewski commented Sep 25, 2024
View reviewed changes
packages/elements/src/react/sign-in/root.tsx
@@ -1,5 +1,5 @@
import { useClerk } from '@clerk/shared/react';
import { useClerkHostRouter } from '@clerk/shared/router';
import { useClerkHostRouter, useClerkRouter } from '@clerk/shared/router';
Copy link
Member Author

Choose a reason for hiding this comment

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

Use useClerkRouter hook from shared vs the original local implementation.

tmilewski
tmilewski commented Sep 25, 2024
View reviewed changes
packages/elements/src/react/sign-in/root.tsx
}, [clerk, exampleMode, formRef?.id, !!router, clerk.loaded]);
}, [Boolean(clerk), exampleMode, !!router, clerk.loaded]);

useEffect(() => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Limit the number of events sent by scoping the dependencies down.

@tmilewski tmilewski force-pushed the tm/elements-consolidation branch from c4550eb to 2709db7 Compare October 3, 2024 20:05
@tmilewski tmilewski force-pushed the tm/elements-fix-errant-renders branch from 868e94b to 874f4e2 Compare October 3, 2024 20:31
@tmilewski tmilewski force-pushed the tm/elements-consolidation branch from 2709db7 to 4e0f396 Compare October 4, 2024 17:16
@tmilewski tmilewski force-pushed the tm/elements-fix-errant-renders branch from 874f4e2 to ab1b18c Compare October 4, 2024 17:16
@tmilewski tmilewski force-pushed the tm/elements-consolidation branch from 4e0f396 to 6520328 Compare October 4, 2024 18:55
@tmilewski tmilewski force-pushed the tm/elements-fix-errant-renders branch from ab1b18c to aa8e5f7 Compare October 4, 2024 18:56
@tmilewski tmilewski force-pushed the tm/elements-consolidation branch from 4dafbc6 to ff29b34 Compare October 10, 2024 17:56
@tmilewski tmilewski closed this Jan 22, 2025
@tmilewski tmilewski deleted the tm/elements-fix-errant-renders branch January 22, 2025 18:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@tmilewski tmilewski

Labels
elements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@tmilewski @clerk-cookie