Route head function can still execute before loader function finishes #6221

Activity

1. schiller-manuel

   added

   start-head

   on Mar 8, 2026
2. Dince-afk commented on Jun 3, 2026

   

   Dince-afk

   on Jun 3, 2026

   More actions

   I am experiencing a head and component loaderData content mismatch as well in this route:

   import { generatePageTitle } from "@/lib/seo";
   import { createFileRoute } from "@tanstack/react-router";
   
   export const Route = createFileRoute("/quote")({
     head: ({ loaderData }) => ({
       meta: [
         {
           title: generatePageTitle(`Quote by ${loaderData?.author || "..."}`),
         },
       ],
     }),
     loader: async () => {
       await new Promise((resolve) => setTimeout(resolve, 2000));
       const ranNum = Math.floor((Math.random() + 1) * 25);
       const res = await fetch(`https://dummyjson.com/quotes/${ranNum}`);
       const quote: { quote: string; author: string; id: number } =
         await res.json();
       return quote;
     },
     pendingComponent: () => <div>Loading...</div>,
     component: RouteComponent,
   });
   
   function RouteComponent() {
     const randomQuote = Route.useLoaderData();
     return (
       <div className="space-y-4 text-center">
         <p className="mx-auto max-w-prose italic">{randomQuote.quote}</p>
         <p className="font-extralight text-neutral-500">{randomQuote.author}</p>
         <p className="text-neutral-500">{randomQuote.id}</p>
       </div>
     );
   }

   On subsequent client navigations to that route I keep getting fresh (based on the reactive useLoaderData() hook) component data, but for the head title Quote by ${loaderData?.author || "..."} I don't get the same fresh loaderData. Always just the previous navigation loaderData. Head title is always lagging behind one loaderData run.
3. schiller-manuel

   added 3 commits that reference this issue on Jun 25, 2026

   fix: match loading

   ...

   This issue will close once commit 4f35374 is merged into the 'main' branch.

   4f35374

   fix: match loading

   ...

   This issue will close once commit aadf3ba is merged into the 'main' branch.

   aadf3ba

   fix: match loading

   ...

   This issue will close once commit e9acd3a is merged into the 'main' branch.

   e9acd3a
4. Sheraff

   added a commit that references this issue on Jul 4, 2026

   test: pin 24 community-reported issues fixed by the match-loading wor…

   ...

   60eb597
5. schiller-manuel

   added 3 commits that reference this issue on Jul 23, 2026

   failing regressiontest for #6221

   0f94cda

   failing regressiontest for #6221

   279db75

   failing regressiontest for #6221

   185fccc
6. Sheraff

   closed this as completedin #7805on Aug 4, 2026