useNavigation

Detailed Explanation

useNavigation is a React Router Hook that gives your Component information about the current navigation state. It tells you whether the app is idle, loading a new page, or submitting a form.

import { useNavigation } from 'react-router-dom';

function CreatePostButton() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  return (
    <button disabled={isSubmitting}>
      {isSubmitting ? 'Posting...' : 'Create Post'}
    </button>
  );
}

The three navigation states are:

• idle: Nothing is happening — the page is ready
• loading: A loader is fetching data for a new page
• submitting: An action is processing a form submission

The most common use is creating loading states. When navigation.state === 'submitting', you disable the submit button and show "Posting..." to prevent double submissions. When navigation.state === 'loading', you can show a progress bar or spinner.

useNavigation works alongside useLoaderData (for displaying fetched data), useActionData (for displaying form responses), and Form (for submitting data). Together they form the complete React Router data flow: Form submits → useNavigation shows loading → action processes → useActionData shows result.