Why useNavigation for pending states in Remix? - Purpose & Use Cases

The Big Idea

Discover how to make your app feel instantly responsive without extra code!

The Scenario

Imagine clicking a link on a website and having to guess if the page is loading or not because there is no visual sign. You might click multiple times or get frustrated waiting without knowing what's happening.

The Problem

Manually tracking loading states means writing extra code to handle every possible user action and update the UI. This is easy to forget, causes bugs, and makes the app feel slow or broken.

The Solution

The useNavigation hook in Remix automatically tells you when navigation is happening. It lets you show loading indicators or disable buttons without extra hassle, making your app feel smooth and responsive.

Before vs After

✗ Before

const [loading, setLoading] = useState(false);
// manually set loading true/false on clicks and fetches

✓ After

const navigation = useNavigation();
const loading = navigation.state === 'loading';

What It Enables

You can easily show real-time feedback during page changes, improving user trust and experience.

Real Life Example

When a user submits a form, useNavigation lets you show a spinner on the submit button until the new page loads, so they know their action is working.

Key Takeaways

Manual loading state tracking is error-prone and tedious.

useNavigation provides automatic navigation state updates.

This leads to better user feedback and smoother app interactions.

Practice

1. What does useNavigation in Remix Framework primarily help you detect?

easy

A. When a navigation or form submission is in progress

B. When the user clicks a button

C. When the page has fully loaded

D. When the server sends a response

Solution

1. Step 1: Understand the purpose of useNavigation

   useNavigation is a hook that tells you about the current navigation state, such as loading or submitting.

2. Step 2: Identify what it detects

   It specifically detects when navigation or form submission is happening, so you can show loading states.

3. Final Answer:

   When a navigation or form submission is in progress -> Option A

4. Quick Check:

   useNavigation detects navigation state = B [OK]

Hint: useNavigation tracks loading or submitting states only [OK]

Common Mistakes:

• Confusing useNavigation with page load completion
• Thinking it detects button clicks directly
• Assuming it tracks server responses

2. Which of the following is the correct way to get the navigation state using useNavigation in a Remix component?

easy

A. const navigation = useNavigation(); const state = navigation.state;

B. const navigation = useNavigation(); const state = navigation.status;

C. const navigation = useNavigation; const state = navigation.state();

D. const navigation = useNavigation(); const state = navigation.navigationState;

Solution

1. Step 1: Recall the correct property name

   The useNavigation hook returns an object with a state property that holds the current navigation state.

2. Step 2: Check syntax correctness

   const navigation = useNavigation(); const state = navigation.state; correctly calls useNavigation() and accesses navigation.state. Other options use wrong property names or omit parentheses.

3. Final Answer:

   const navigation = useNavigation(); const state = navigation.state; -> Option A

4. Quick Check:

   Correct property is navigation.state = A [OK]

Hint: Remember: useNavigation() returns object with .state property [OK]

Common Mistakes:

• Using navigation.status instead of navigation.state
• Forgetting parentheses after useNavigation
• Calling navigation.state as a function

3. Given this Remix component snippet, what will be rendered when a form submission is in progress?

import { useNavigation } from '@remix-run/react';

export default function SubmitButton() {
  const navigation = useNavigation();
  return (
    <button disabled={navigation.state === 'submitting'}>
      {navigation.state === 'submitting' ? 'Submitting...' : 'Submit'}
    </button>
  );
}

medium

A. <button>Submitting...</button>

B. <button>Submit</button>

C. <button disabled>Submit</button>

D. <button disabled>Submitting...</button>

Solution

1. Step 1: Check the condition for disabling the button

   The button is disabled when navigation.state === 'submitting'.

2. Step 2: Check the button text during submission

   When submitting, the button text changes to 'Submitting...'. So the button is disabled and shows 'Submitting...'.

3. Final Answer:

   <button disabled>Submitting...</button> -> Option D

4. Quick Check:

   Disabled + 'Submitting...' text = A [OK]

Hint: Button disables and text changes when state is 'submitting' [OK]

Common Mistakes:

• Ignoring the disabled attribute
• Showing 'Submit' text during submission
• Confusing 'loading' with 'submitting' state

4. Identify the error in this Remix component using useNavigation:

import { useNavigation } from '@remix-run/react';

export default function LoadingIndicator() {
  const navigation = useNavigation;
  if (navigation.state === 'loading') {
    return <div>Loading...</div>;
  }
  return <div>Ready</div>;
}

medium

A. Missing import for React

B. Forgot to call useNavigation as a function

C. Incorrect state value 'loading', should be 'submitting'

D. Return statements must be wrapped in parentheses

Solution

1. Step 1: Check how useNavigation is used

   The code assigns const navigation = useNavigation; without parentheses, so navigation is a function reference, not the hook result.

2. Step 2: Understand the impact

   Accessing navigation.state will cause an error because navigation is not the hook's returned object.

3. Final Answer:

   Forgot to call useNavigation as a function -> Option B

4. Quick Check:

   useNavigation() must be called with () = C [OK]

Hint: Always call useNavigation() with parentheses [OK]

Common Mistakes:

• Using useNavigation without ()
• Confusing 'loading' and 'submitting' states
• Assuming React import is mandatory for hooks

5. You want to disable a submit button and show a spinner only when a form submission or navigation is pending using useNavigation. Which code snippet correctly implements this behavior? A)

const navigation = useNavigation();
return <button disabled={navigation.state === 'loading'}>Submit</button>;

B)

const navigation = useNavigation();
return <button disabled={navigation.state !== 'idle'}>
  {navigation.state !== 'idle' ? 'Loading...' : 'Submit'}
</button>;

C)

const navigation = useNavigation();
return <button disabled={navigation.state === 'submitting'}>
  {navigation.state === 'submitting' ? 'Submitting...' : 'Submit'}
</button>;

D)

const navigation = useNavigation();
return <button disabled={navigation.state === 'pending'}>Submit</button>;

hard

A. Disables only on 'loading' state, missing 'submitting'

B. Disables and shows submitting only during form submission

C. Disables and shows loading for any non-idle state

D. Uses invalid 'pending' state which does not exist

Solution

1. Step 1: Understand navigation.state values

   Valid states are 'idle', 'loading', and 'submitting'. 'pending' is not valid.

2. Step 2: Check which snippet covers all pending states

   Disables and shows loading for any non-idle state disables the button and shows loading text whenever state is not 'idle', covering both 'loading' and 'submitting'.

3. Step 3: Evaluate other options

   A only disables on 'loading' (misses 'submitting'), B disables and shows loading for any non-idle state, C only on 'submitting', D uses invalid state.

4. Final Answer:

   Disables and shows loading for any non-idle state -> Option C

5. Quick Check:

   Use state !== 'idle' for all pending states = B [OK]

Hint: Check for state !== 'idle' to cover all pending states [OK]

Common Mistakes:

• Using invalid state names like 'pending'
• Checking only 'loading' or only 'submitting'
• Not showing feedback for all navigation states