useNavigation for pending states in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook that helps track navigation state.

Remix

import { [1] } from '@remix-run/react';

Drag options to blanks, or click blank then click option'

AuseNavigation

BuseLoaderData

CuseParams

DuseActionData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook like useLoaderData or useParams.

Forgetting to import from '@remix-run/react'.

The useNavigation hook is imported from @remix-run/react to track navigation states like loading or submitting.

2fill in blank

medium

Complete the code to get the current navigation state inside a component.

Remix

const navigation = [1]();

Drag options to blanks, or click blank then click option'

AuseActionData

BuseLoaderData

CuseParams

DuseNavigation

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a hook that does not return navigation state.

Using hooks that only provide data, not navigation info.

Calling useNavigation() inside a component returns the current navigation state object.

3fill in blank

hard

Fix the error in the conditional that checks if the navigation state is 'submitting'.

Remix

if (navigation.state === [1]) {
  return <p>Submitting...</p>;
}

Drag options to blanks, or click blank then click option'

A'loading'

B'done'

C'submitting'

D'idle'

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for 'loading' instead of 'submitting'.

Using a non-existent state string like 'done'.

The navigation state to check when a form is being submitted is 'submitting'.

4fill in blank

hard

Fill both blanks to show a loading message when navigation is in progress.

Remix

if (navigation.state === [1] || navigation.state === [2]) {
  return <p>Loading...</p>;
}

Drag options to blanks, or click blank then click option'

A'loading'

B'submitting'

C'idle'

D'done'

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'idle' which means no navigation is happening.

Using 'done' which is not a valid navigation state.

Navigation states 'loading' and 'submitting' both indicate a pending state where a loading message is appropriate.

5fill in blank

hard

Fill all three blanks to create a component that shows different messages based on navigation state.

Remix

function StatusMessage() {
  const navigation = [1]();

  if (navigation.state === [2]) {
    return <p>Submitting form...</p>;
  } else if (navigation.state === [3]) {
    return <p>Loading page...</p>;
  }

  return <p>Ready</p>;
}

Drag options to blanks, or click blank then click option'

AuseNavigation

B'submitting'

C'loading'

DuseLoaderData

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong hook like useLoaderData instead of useNavigation.

Mixing up 'loading' and 'submitting' states.

The component uses useNavigation() to get the navigation state. It checks for 'submitting' to show a submitting message and 'loading' to show a loading message. Otherwise, it shows 'Ready'.

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