extended-salmon

Layout component in route vs using a layout route performance

Does having a layout route make it more performant to move from one page to the other compared to just having the two routes and inside each the content is wrapped by a Layout component? I'd guess there isn't much of a difference since Tanstack Start does client side routing but maybe I'm missing something.

19 Replies

extended-salmonOP•5mo ago

I'm asking because I have 4 different layouts and the URL structure often doesn't reflect the way layouts are used so it seems like for me it's actually better if I just have in-route layouts instead of having thousands of groupings in the routes folder. Wondering if there are any penalties to doing that.

equal-jade•5mo ago

what kind of performance ?

extended-salmonOP•5mo ago

React re-rendering performance

equal-jade•5mo ago

probably best to measure that yourself whether it has any impact

extended-salmonOP•5mo ago

@Manuel Schiller What I meant is: is there a difference between having two route pages with the same layout vs having that layout be in a layout route? Is the layout component gonna re-render in the former case vs not re-render in the latter case?

equal-jade•5mo ago

rerender when what happens?

extended-salmonOP•5mo ago

When you navigate from one page to the other

equal-jade•5mo ago

depends on your structure. can you share a concrete scenario?

extended-salmonOP•5mo ago

Yeah sure, give me a sec Case 1 routes/app.tsx

export const Route = createFileRoute("/app")({
  component: Layout,
});

function Layout() {
  return (
    <LayoutComponent>
      <Outlet />
    </LayoutComponent>
  );
}

export const Route = createFileRoute("/app")({
  component: Layout,
});

function Layout() {
  return (
    <LayoutComponent>
      <Outlet />
    </LayoutComponent>
  );
}

routes/app/a.tsx

export const Route = createFileRoute("/app/a")({
  component: Page,
});

function Page() {
  return <PageA />
}

export const Route = createFileRoute("/app/a")({
  component: Page,
});

function Page() {
  return <PageA />
}

routes/app/b.tsx

export const Route = createFileRoute("/app/b")({
  component: Page,
});

function Page() {
  return <PageB />
}

export const Route = createFileRoute("/app/b")({
  component: Page,
});

function Page() {
  return <PageB />
}

Case 2 routes/app/a.tsx

export const Route = createFileRoute("/app/a")({
  component: Page,
});

function Page() {
  return (
    <LayoutComponent>
      <PageA />
    </LayoutComponent>
  );
}

export const Route = createFileRoute("/app/a")({
  component: Page,
});

function Page() {
  return (
    <LayoutComponent>
      <PageA />
    </LayoutComponent>
  );
}

routes/app/b.tsx

export const Route = createFileRoute("/app/b")({
  component: Page,
});

function Page() {
  return (
    <LayoutComponent>
      <PageB />
    </LayoutComponent>
  );
}

export const Route = createFileRoute("/app/b")({
  component: Page,
});

function Page() {
  return (
    <LayoutComponent>
      <PageB />
    </LayoutComponent>
  );
}

@Manuel Schiller I guess the question is, what is the difference between these two cases and why should I prefer case 1 over case 2?

equal-jade•5mo ago

when navigating from /app/a to /app/b? then /app would not re-render in case 1 (unless it subscribed to some router state that changed due to the navigation)

extended-salmonOP•5mo ago

And in case 2 it would re-render?

equal-jade•5mo ago

the LayoutComponent?

extended-salmonOP•5mo ago

yes

equal-jade•5mo ago

maybe! it depends if react can reconcile this or not

extended-salmonOP•5mo ago

So I'm guessing that in case 2 if I had in both pages this:

  return (
    <LayoutComponent key="layout">
      {...}
    </LayoutComponent>
  );

  return (
    <LayoutComponent key="layout">
      {...}
    </LayoutComponent>
  );

then it wouldn't re-render

equal-jade•5mo ago

maybe really depends on react and the specific circumstances

extended-salmonOP•5mo ago

I see

equal-jade•5mo ago

i would definitely go for option 1

extended-salmonOP•5mo ago

Ok thanks 👍

Gaming

Programming

Layout component in route vs using a layout route performance

Did you find this page helpful?