Introduction

In today’s digital landscape, web applications have evolved significantly. We’ve moved from Multi-Page Applications (MPAs), where each page is a separate HTML document, to single-page applications (SPAs), which load a single HTML page and update content dynamically using AJAX. While this evolution is exciting, SPAs present challenges in managing navigation. Unlike MPAs, we can’t use native JavaScript APIs like window, location, or performance.navigation to track user navigation between pages right away. There are many ways that we can use to handle navigation for SPA, and in React App, we mainly use React Router or React Router Dom to handle the navigation.

What is useBlocker?

One day, i was thinking about one event that might happened when a user uses an application. Let’s say we have an exam application. Of course we dont want user to go to another page while user is still working on a test. If your application is a Multi Page Application, you can directly use window.location or maybe beforeunload from javascript API to handle it. But what if it is a SPA?, Here where React Router’s useBlocker comes handy. In a simple way, useBlocker is a hooks that allows you to prevent the user from navigating away from the current location, and present them with a custom UI to allow them to confirm the navigation. I will show you how to use it as flexible as possible so you can use it for many different condition. For more detailed information about the hooks properties and others, check it here useBlocker React Router v6

⚠️ So far, it is only support for the v6 version

Simple useBlocker Usage

Here is the simple usage of useBlocker hooks to block navigating to another page. The case here is when user already fill a form and then they intended to navigate to another page while the form data already filled. So the useBlocker will block the user as long as the form data is not empty.

function ImportantForm() {
  let [value, setValue] = React.useState("");

  // Block navigating elsewhere when data has been entered into the input
  let blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      value !== "" && currentLocation.pathname !== nextLocation.pathname,
  );

  return (
    <Form method="post">
      <label>
        Enter some important data:
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>

      {blocker.state === "blocked" ? (
        <div>
          <p>Are you sure you want to leave?</p>
          <button onClick={() => blocker.proceed()}>Proceed</button>
          <button onClick={() => blocker.reset()}>Cancel</button>
        </div>
      ) : null}
    </Form>
  );
}

This useBlocker hooks works perfectly fine and can keep the user to stay on the page you want them to stay. You can also make this more flexible by making your own custom hooks using useBlocker hooks

Custom useBlocker hooks

Simple Value Tracker

import { useState, useEffect } from "react";
import { useBlocker } from "react-router-dom";

export const useNavigationBlock = (shouldBlock = false, allowedPaths = []) => {
  const [isBlocking, setIsBlocking] = useState(shouldBlock);

  const shouldBlockNavigation = ({ currentLocation, nextLocation }) => {
    const isNextPathAllowed = allowedPaths.some((path) =>
      nextLocation.pathname.startsWith(`/${path}`),
    );

    return (
      isBlocking &&
      !isNextPathAllowed &&
      currentLocation.pathname !== nextLocation.pathname
    );
  };

  const blocker = useBlocker(shouldBlockNavigation);

  useEffect(() => {
    setIsBlocking(shouldBlock);
  }, [shouldBlock]);

  return { blocker, isBlocking, setIsBlocking };
};

Here is a custom hooks version where you can determine what pages you allow the user to navigate to from their current page, and you can set whether the blocker is true or false depending on the condition of your component. It suits the case if the user has to fill two different forms but you want to make the flow to fill the first form and the second form seamless and secure because you want to submit all the answers at the end of the test. The allowed paths is optional, so if you want to be strict, you dont have to fill it so it will block user to go to any pages. Here is how to use it in your component.

function ImportantForm() {
  const [value, setValue] = React.useState("");

  // Determine whether the form should block navigation
  const hasUnsavedChanges = value !== "";

  // Use the custom hook and pass the condition
  const { blocker } = useNavigationBlock(hasUnsavedChanges, [
    "employee-exam", // Example allowed form paths you don't want to block
  ]);

  return (
    <Form method="post">
      <label>
        Enter your name:
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>

      {blocker.state === "blocked" && (
        <div>
          <p>Are you sure you want to leave?</p>
          <button onClick={() => blocker.proceed()}>Proceed</button>
          <button onClick={() => blocker.reset()}>Cancel</button>
        </div>
      )}
    </Form>
  );
}

You can also take a different approach to control the useBlocker behavior. For example, you can modify your custom hook to track the entire form’s values, allowing you to block the user’s navigation if the form isn’t fully completed. Here is the customized hooks.

Nested Value Tracker

So this part will cover 2 cases, the first is when you create a form without using any form packages. This one is tricky because it will take many lines of code, which makes it harder to maintain on the further development. But here is the code. I tried to make it as simple as possible so you could understand it quickly. In this code I am going to use lodash which is a library to eases us whenever we want to manipulate a data. Especially when it comes to array and object. You can install it using npm i --save lodash or using any package managers you use. For further information you access it here Lodash Documentation

Without Form Packages

So you can just create the component you want to use and combine it with your custom hooks.

import React, { useState } from "react";
import _ from "lodash";

export default function ManualFormWithDirtyCheck() {
  const [initialValues, setInitialValues] = useState({
    firstName: "John",
    lastName: "Doe",
    address: {
      street: "123 Main St",
      city: "Metropolis",
      state: "NY",
      zip_code: 10001,
    },
  });

  const [formValues, setFormValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  // Detect if current form values is different from initial values
  const isDirty = !_.isEqual(formValues, initialValues);

  const { blocker } = useNavigationBlock(isDirty);

  // Create validation for the required fields
  const validateForm = () => {
    const newErrors = {};

    if (!formValues.firstName.trim()) {
      newErrors.firstName = "First Name is required";
    }

    if (!formValues.lastName.trim()) {
      newErrors.lastName = "Last Name is required";
    }

    if (!formValues.address.street.trim()) {
      newErrors.street = "Street is required";
    }

    if (!formValues.address.city.trim()) {
      newErrors.city = "City is required";
    }

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (field, value) => {
    setFormValues((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const handleAddressChange = (field, value) => {
    setFormValues((prev) => ({
      ...prev,
      address: { ...prev.address, [field]: value },
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // Validate user to fill all the input form
    if (!validateForm()) {
      alert("Please complete the form correctly!");
      return;
    }

    console.log("Submitting form:", formValues);

    // reset `isDirty` so the blocker is not showed if the user wants to navigate away after the submission
    setInitialValues(formValues);

    alert("Form submitted and dirty state reset!");
  };

  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">Manual Form With Dirty Check</h1>

      <form onSubmit={handleSubmit} className="space-y-4">
        {/* First Name */}
        <div>
          <label className="block">First Name</label>
          <input
            type="text"
            value={formValues.firstName}
            onChange={(e) => handleChange("firstName", e.target.value)}
            className="border p-2 w-full"
          />
          {errors.firstName && (
            <p className="text-red-500 text-sm">{errors.firstName}</p>
          )}
        </div>

        {/* Last Name */}
        <div>
          <label className="block">Last Name</label>
          <input
            type="text"
            value={formValues.lastName}
            onChange={(e) => handleChange("lastName", e.target.value)}
            className="border p-2 w-full"
          />
          {errors.lastName && (
            <p className="text-red-500 text-sm">{errors.lastName}</p>
          )}
        </div>

        {/* Address: Street */}
        <div>
          <label className="block">Street</label>
          <input
            type="text"
            value={formValues.address.street}
            onChange={(e) => handleAddressChange("street", e.target.value)}
            className="border p-2 w-full"
          />
          {errors.street && (
            <p className="text-red-500 text-sm">{errors.street}</p>
          )}
        </div>

        {/* Address: City */}
        <div>
          <label className="block">City</label>
          <input
            type="text"
            value={formValues.address.city}
            onChange={(e) => handleAddressChange("city", e.target.value)}
            className="border p-2 w-full"
          />
          {errors.city && <p className="text-red-500 text-sm">{errors.city}</p>}
        </div>

        {/* Status & Blocker */}
        <div className="mt-4 space-y-2">
          <p>Is Dirty: {isDirty ? "Yes" : "No"}</p>
          {blocker.state === "blocked" && (
            <div>
              <p className="text-red-500">
                ⚠️ You have unsaved changes! Are you sure you want to leave?
              </p>
              <div className="flex items-center space-x-2">
                <button
                  type="button"
                  onClick={() => blocker.proceed()}
                  className="bg-green-500 text-white px-3 py-1 rounded"
                >
                  Yes, Leave
                </button>
                <button
                  type="button"
                  onClick={() => blocker.reset()}
                  className="bg-gray-500 text-white px-3 py-1 rounded"
                >
                  Stay
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Submit Button */}
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        >
          Submit
        </button>
      </form>
    </div>
  );
}

With React Hook Form

Very long and very boilerplate am I right? For the second case, I am using React Hook Form for the example because I think its the most popular form library for React (maybe hehe). Anyway, lets get jump to it. First, we have to make the schema for our form. In here, I am going to use yup for the form validation. If you want more information, check it here Yup.

import * as yup from "yup";

export const formSchema = yup.object().shape({
  firstName: yup.string().required("This field is required"),
  lastName: yup.string().required("This field is required"),
  address: yup.object().shape({
    street: yup.string().required("This field is required"),
    city: yup.string().required("This field is required"),
    state: yup.string().required("This field is required"),
    zip_code: yup.number().optional().nullable(true),
  }),
});

After that, we can use our schema and our custom hooks in our React Hook Form component.

import React, { useEffect } from "react";
import { useForm, FormProvider } from "react-hook-form";
import { formSchema } from "./schema.js";
import { useNavigationBlock } from "./useNavigationBlock";
import { useNavigate } from "react-router-dom";

export default function RHFFormWithDirtyCheck() {
  // simulating a pre-populated data
  const navigate = useNavigate();
  const methods = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      firstName: "John",
      lastName: "Doe",
      address: {
        street: "123 Main St",
        city: "Metropolis",
        state: "NY",
        zip_code: 10001,
      },
    },
    mode: "onChange", // To validate on each change
  });

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isDirty },
    reset,
  } = methods;

  // ✅ Block navigation if form is dirty
  const { blocker } = useNavigationBlock(isDirty);

  // ✅ Submit handler
  const onSubmit = (data) => {
    console.log("✅ Submitted data:", data);
    // Reset dirty state (resets dirty flag and sets these values as baseline)
    reset(data);
    navigate("/dashboard");
  };

  return (
    <FormProvider {...methods}>
      <div className="p-6 space-y-4">
        <h1 className="text-2xl font-bold">React Hook Form With Dirty Check</h1>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div>
            <label className="block">First Name</label>
            <input
              type="text"
              {...register("firstName")}
              className="border p-2 w-full"
            />
            {errors.firstName && (
              <p className="text-red-500 text-sm">{errors.firstName.message}</p>
            )}
          </div>

          <div>
            <label className="block">Last Name</label>
            <input
              type="text"
              {...register("lastName")}
              className="border p-2 w-full"
            />
            {errors.lastName && (
              <p className="text-red-500 text-sm">{errors.lastName.message}</p>
            )}
          </div>

          <div>
            <label className="block">Street</label>
            <input
              type="text"
              {...register("address.street")}
              className="border p-2 w-full"
            />
            {errors?.address?.street && (
              <p className="text-red-500 text-sm">
                {errors.address.street.message}
              </p>
            )}
          </div>

          <div>
            <label className="block">City</label>
            <input
              type="text"
              {...register("address.city")}
              className="border p-2 w-full"
            />
            {errors?.address?.city && (
              <p className="text-red-500 text-sm">
                {errors.address.city.message}
              </p>
            )}
          </div>

          <div>
            <label className="block">State</label>
            <input
              type="text"
              {...register("address.state")}
              className="border p-2 w-full"
            />
            {errors?.address?.state && (
              <p className="text-red-500 text-sm">
                {errors.address.state.message}
              </p>
            )}
          </div>

          <div>
            <label className="block">Zip Code (Optional)</label>
            <input
              type="number"
              {...register("address.zip_code")}
              className="border p-2 w-full"
            />
          </div>

          {/* ✅ Dirty / Filled / Blocking states */}
          <div className="mt-4 space-y-2">
            <p>Is Dirty: {isDirty ? "Yes" : "No"}</p>
            <p>Is Form Filled: {isFormFilled ? "Yes" : "No"}</p>
            {blocker.state === "blocked" && (
              <div>
                <p className="text-red-500">
                  ⚠️ You have unsaved changes!. Are you sure you want to leave?
                </p>
                <div className="flex items-center space-x-2">
                  <button onClick={() => blocker.proceed()}>Yes</button>
                  <button onClick={() => blocker.reset()}>No</button>
                </div>
              </div>
            )}
          </div>

          {/* ✅ Submit */}
          <button
            type="submit"
            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          >
            Submit
          </button>
        </form>
      </div>
    </FormProvider>
  );
}

See? the difference between using React Hook Form and only use useState is so significant. You can easily validate your form, detect changes in your form’s value, and many more. For further information about React Hook Form, check it here React Hook Form

Closing Statement

So yeah, that’s it. That is from my actual experience of making an exam application using React Hook Form, and react-router or react-router-dom. Hope you find this helpful and let’s discuss about this if you have any opinion about my implementation, or you have a brighter ideas than mine above lol. Thank you for reading, and hope this can help you with your project, especially for the frontend who reads this :)