adverse-sapphire

Lazy Loading Rec'd Approach?

Hi, I noticed that the Kitchen Sink + Reacty Query (file based) example in routes/expensive/index.tsx looks like this:

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

But the docs page for lazyRouteComponent say it's rec'd to use createLazyFileRoute. The code splitting example in docs for "Code Splitting" also take the createLazyFileRoute approach. Is there a reason why the file system based routing Kitchen Sink + React Query example uses this approach if it's not recommended? I am looking at implementing @tanstack/router in a medium sized project with react-router that's using <Routes> <Route component={<Foo />} > </Routes> <--- this approach So, I am just trying to understand all the concepts before I start ripping apart the code : )

3 Replies

adverse-sapphireOP•2y ago

I am interested in the answer bc I like the lazyRouteComponent option bc it seems to mean I can avoid having to create two separate files and functions as it shows in the docs:

adverse-sapphireOP•2y ago

But I am not clear what the tradeoffs are, bc at first glance lazyRouteComponent seems like a more straightforward way to achieve this. Can anyone elaborate on the pros and cons and why createLazyFileRoute is the recommended approach?

dependent-tan•2y ago

you should use createLazyFileRoute the other one is deprecated see https://discord.com/channels/719702312431386674/1007702008448426065/1205676463181791382 the example needs to be updated if you want you can provide a PR

Gaming

Programming

Lazy Loading Rec'd Approach?

Did you find this page helpful?