TanStack Router's beforeLoad and loader allow for tight control over loading a route, but how should they be used?

Atomic Object is a software consultancy specializing in custom software development and product design. Readers can learn about software development methodologies, user-centered design principles, and agile practices. With case studies, blog posts, and technical insights, Atomic Object provides  guidance and expertise for building innovative and user-friendly software products.

Atomic Spin

TanStack Router provides two distinct functions for route loading: beforeLoad runs sequentially for parent-to-child routes during pre-loading, handling authentication checks and building context, while loader runs in parallel across routes during the loading phase to fetch component data. The beforeLoad function acts as middleware, stopping route loading if checks fail (like authentication), and can append data to router context for child routes. The loader function focuses on data fetching with built-in caching, making fetched data accessible to components via the useLoaderData hook. Use beforeLoad for access control and context building, and loader for component data fetching.

TanStack Router’s beforeLoad vs. loader — What’s the Difference?