useNavigation for pending states in Remix - Performance & Optimization

Performance: useNavigation for pending states

MEDIUM IMPACT

This affects the responsiveness and perceived loading speed during navigation in Remix apps.

Show loading state during navigation to improve user feedback

Remix

const navigation = useNavigation();
return (
  <>
    {navigation.state === 'loading' && <Spinner aria-live="polite" />}
    <Outlet />
  </>
);

Shows a small non-blocking spinner without replacing main content, reducing layout shifts.

📈 Performance GainSingle reflow for spinner, minimal paint, improves INP

Show loading state during navigation to improve user feedback

Remix

const navigation = useNavigation();
if (navigation.state === 'loading') {
  return <div>Loading...</div>;
}
return <Outlet />;

Rendering a full loading component blocks interaction and triggers layout shifts.

📉 Performance CostTriggers multiple reflows and paint updates during navigation

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page loader replacement	High (replaces main content)	Multiple reflows	High paint cost	[X] Bad
Overlay spinner or progress bar	Low (adds small overlay)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

useNavigation updates state during route changes, triggering React to re-render affected components. This impacts Style Calculation, Layout, and Paint stages depending on how loading UI is implemented.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to DOM changes for loading indicators

Core Web Vital Affected

INP

This affects the responsiveness and perceived loading speed during navigation in Remix apps.

Optimization Tips

1Use small overlay elements for loading states instead of replacing main content.

2Minimize DOM changes during navigation to reduce layout recalculations.

3Keep UI stable to improve interaction responsiveness and reduce layout shifts.

Performance Quiz - 3 Questions

What is the main performance benefit of using useNavigation to show a spinner overlay instead of replacing the entire page during loading?

A It eliminates all paint operations

B It decreases the bundle size significantly

C It reduces layout shifts and improves input responsiveness

D It prevents network requests from happening

DevTools: Performance

How to check: Record a navigation event and observe the Main thread activity and Layout events during loading states.

What to look for: Look for multiple layout recalculations and long tasks indicating blocking UI; minimal layout and paint events indicate good performance.

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