useNavigation for pending states in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does the useNavigation hook return when a form submission is in progress?

Consider a Remix component using useNavigation to track navigation state. What is the value of navigation.state during a form submission?

Remix

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

export default function MyComponent() {
  const navigation = useNavigation();

  return <div>{navigation.state}</div>;
}

A "loading"

B "idle"

C "submitting"

D "pending"

💡 Hint

Think about the specific state that indicates a form is being sent but not yet completed.

The useNavigation hook returns an object with a state property that can be idle, submitting, or loading. When a form is being submitted, the state is submitting.

❓ state_output

intermediate

What will be rendered when navigation.state is "loading"?

Given this component snippet, what will be the visible output when navigation.state is "loading"?

Remix

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

export default function LoadingIndicator() {
  const navigation = useNavigation();

  return (
    <div>
      {navigation.state === 'loading' ? <p>Loading...</p> : <p>Ready</p>}
    </div>
  );
}

A Nothing is rendered inside the div.

B The text "Loading..." is shown.

C The text "Ready" is shown.

D An error is thrown because of invalid state.

💡 Hint

Check the condition that shows the loading message.

The component checks if navigation.state equals "loading". If true, it renders "Loading..."; otherwise, it shows "Ready".

📝 Syntax

advanced

Which option correctly uses useNavigation to disable a submit button during form submission?

Select the code snippet that disables the submit button only when the form is submitting.

A

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

B

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

C

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

D

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

💡 Hint

Remember which state means the form is actively submitting.

The submit button should be disabled only when navigation.state is "submitting". Other states do not indicate active submission.

🔧 Debug

advanced

Why does this component always show the loading message?

Identify the reason why the loading message always appears in this Remix component using useNavigation:

Remix

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

export default function Loader() {
  const navigation = useNavigation();

  if (navigation.state === 'loading') {
    return <p>Loading...</p>;
  }

  return <p>Done</p>;
}

A The code uses assignment (=) instead of comparison (===) in the if condition.

B The <code>useNavigation</code> hook is not imported correctly.

C The component does not handle the 'submitting' state.

D The return statements are missing inside the if block.

💡 Hint

Check the if condition syntax carefully.

The if condition uses a single equals sign (=), which assigns 'loading' to navigation.state instead of comparing it. This causes a bug where the condition always evaluates to true but does not behave as expected.

🧠 Conceptual

expert

What is the main difference between navigation.state === 'submitting' and navigation.state === 'loading' in Remix's useNavigation hook?

Choose the best explanation for how Remix distinguishes these two states in useNavigation.

A "submitting" means a form is being sent; "loading" means the app is fetching new data after navigation.

B "submitting" means the app is fetching data; "loading" means a form is being sent.

C "submitting" and "loading" are interchangeable and mean the same thing.

D "submitting" means the app is idle; "loading" means the app is busy.

💡 Hint

Think about the difference between sending data and loading new pages.

In Remix, navigation.state === 'submitting' indicates a form submission is in progress. navigation.state === 'loading' means the app is loading new data or a new route after navigation.

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