Better User Experience
React Router provides hooks to inspect the state of navigation and mutations.
useNavigation
Check if a submission is changing state:
tsx
1import { useNavigation } from "react-router";
2
3export default function SubmitButton() {
4 const navigation = useNavigation();
5 const isSubmitting = navigation.state === "submitting";
6
7 return (
8 <button disabled={isSubmitting}>
9 {isSubmitting ? "Saving..." : "Save"}
10 </button>
11 );
12}Optimistic UI
You can access the data being sent before the server responds using
formData.tsx
1const navigation = useNavigation();
2const optimisticName = navigation.formData?.get("name");
3
4return <h1>{optimisticName || user.name}</h1>;