DEV Community

Sarwar Hossain
Sarwar Hossain

Posted on

🔍 Unleashing the Potential of useBlocker Hook in React Router 🚀

In the dynamic landscape of React development, ensuring smooth navigation and data integrity is key. Enter the useBlocker hook in React Router, a powerful tool that enhances user experience by preventing accidental data loss during navigation transitions. 💡

💬 Description:
The useBlocker hook in React Router intercepts navigation attempts while there are unsaved changes on the page, displaying a confirmation dialog to prevent accidental data loss. This feature not only enhances the user experience but also instills confidence in your application's reliability. 🛡️

import { useBlocker } from 'react-router';

const CreatePostPage = () => {
  const [isBlocking, setIsBlocking] = useState(false);

  // Prompt user before leaving the page if there are unsaved changes
    (tx) => {
      if (isBlocking) {
        tx.prompt('You have unsaved changes. Are you sure you want to leave?');

  const handleInputChange = (event) => {
    // Detect changes and set isBlocking accordingly
    setIsBlocking( > 0);

  const handleSaveDraft = () => {
    // Logic to save draft
    console.log('Draft saved!');
    setIsBlocking(false); // Reset isBlocking after saving

  return (
      <h1>Create Post</h1>
      <input type="text" onChange={handleInputChange} />
      <button onClick={handleSaveDraft}>Save Draft</button>

export default CreatePostPage;

Enter fullscreen mode Exit fullscreen mode

🔍 Why it Matters:
While the useBlocker hook is deprecated in recent versions of React Router, fear not! You can achieve similar functionality using vanilla JavaScript's window object. Simply utilize the beforeunload event listener to prompt users before leaving the page with unsaved changes. 💼

By leveraging React Router's useBlocker hook or JavaScript's window object, you can create seamless and intuitive web experiences that prioritize user satisfaction and data integrity. 🌟

ReactRouter #FrontendDevelopment #UserExperience #CodeSnippet #ReactHooks #WebDevelopment 🚀

Top comments (0)