Summary and Key Takeaways

• React Router can help you with data fetching and submission.
• You can register loader() functions for your routes, causing data fetching to be initialized as a route becomes active.
• loader() functions return data (or responses, wrapping data) that can be accessed via useLoaderData() in your component functions.
• loader() data can be used across components via useRouteLoaderData().
• You can also register action() functions on your routes that are triggered upon form submissions.
• To trigger action() functions, you must use React Router's <Form> component or submit data programmatically via useSubmit() or useFetcher().
• useFetcher() can be used to load or submit data without initiating a route transition.
• When fetching slow data, you can use defer() to defer loading some or all of a route's data.

What's Next?

Fetching and submitting data are extremely common tasks, especially when building more...