Skip to content

Conversation

@uhyo
Copy link
Owner

@uhyo uhyo commented Dec 27, 2025

Design for a new useBlocker hook that prevents navigation away from
the current route. Key design decisions:

  • Synchronous boolean-returning function (aligns with beforeunload)
  • Returns BlockerState with proceed/reset for user confirmation UI
  • Integrates with both SPA navigations and beforeunload events
  • Multiple blockers can coexist in the component tree

Design for a new useBlocker hook that prevents navigation away from
the current route. Key design decisions:

- Synchronous boolean-returning function (aligns with beforeunload)
- Returns BlockerState with proceed/reset for user confirmation UI
- Integrates with both SPA navigations and beforeunload events
- Multiple blockers can coexist in the component tree
Remove BlockerState return value and proceed/reset functions.
The hook is now purely declarative - when shouldBlock returns true,
navigation is prevented. To allow navigation, the blocking condition
must change (e.g., save form to set isDirty to false).

This aligns perfectly with beforeunload behavior where there's no
programmatic way to proceed - only the browser's native dialog.
Simplify API from function to declarative boolean option:
- Before: useBlocker(() => isDirty)
- After: useBlocker({ enabled: isDirty })

This is more declarative and the object form allows for future
extension if needed.
Revert to () => boolean function so users can call confirm() inside
the handler with their own custom message.

Remove automatic beforeunload integration - that's a separate concern
and users can add their own listener if needed. This keeps the hook
focused on SPA navigation only.
@uhyo uhyo merged commit 4c73476 into master Dec 27, 2025
1 check passed
@uhyo uhyo deleted the claude/design-useblocker-hook-qwnvE branch December 27, 2025 12:18
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