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 unstable_useBlocker key issues in strict mode #10573

Merged
merged 8 commits into from
Jun 9, 2023

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Jun 8, 2023

Fix issues with internal blocker key generation in StrictMode

Closes #10073
Closes #10144

Also strips the basename (if present) from the currentLocation/nextLocation we expose out to the user to match useLocation behavior. This was discovered as part of #10550 (comment)

@changeset-bot
Copy link

changeset-bot bot commented Jun 8, 2023

🦋 Changeset detected

Latest commit: adacb89

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

This PR includes changesets to release 5 packages
Name Type
react-router Patch
@remix-run/router Patch
react-router-dom Patch
react-router-dom-v5-compat Patch
react-router-native 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

@@ -935,8 +936,9 @@ let blockerId = 0;
export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
let { router } = useDataRouterContext(DataRouterHook.UseBlocker);
let state = useDataRouterState(DataRouterStateHook.UseBlocker);
let [blockerKey] = React.useState(() => String(++blockerId));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved this increment into a side effect to be compliant with StrictMode. Fetchers probably have a similar issue but they don't need to put anything like a blocker function into an internal router cache so it doesn't end up causing any user-facing issues.

updateState({ blockers: new Map(router.state.blockers) });
let blockers = new Map(state.blockers);
blockers.set(blockerKey!, IDLE_BLOCKER);
updateState({ blockers });
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Avoid mutating the state Map directly

@roy-andri
Copy link

@brophdawg11 is this PR hasn't added to the latest version (v6.13.0)?

@brophdawg11
Copy link
Contributor Author

Correct - it will be available in 6.14.0 - 6.13.0 was used to add a future flag for React.startTransition

@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version 6.14.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version 6.14.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@DennisTrujilloDev
Copy link

Good afternoon! I'm wondering if this patch will be available in the next release or if there are any estimates at all as to when it would be released. Thank you

() => () => router.deleteBlocker(blockerKey),
[router, blockerKey]
);
React.useEffect(() => {

Choose a reason for hiding this comment

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

I believe this introduced a useEffect loop since setBlockerKey is used in the dependency array and changed in the same effect.

Choose a reason for hiding this comment

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

Choose a reason for hiding this comment

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

#10650 please have a look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants