SolidJS•10mo ago

Portals in nested routes not rendering in consistent order

Check out this stackblitz: https://stackblitz.com/edit/solidjs-templates-wwykia Loading /one/two/three first causes the breadcrumbs to render in the order three / one / two, loading /one/two first causes the breadcrumbs to render two / one. Navigating around more seems to sort it out but the render order of the portals is making my current approach for a breadcrumb system super unreliable. My guess is it's some weird interplay of lazy loading routes and portal mounting order, since not using lazy loading seems to make everything work fine. On a related note, in our actual app, navigating from /users to /users/:userId is causing the breadcrumb to render multiple times - but only if the user's data hasn't already been loaded, so i think something weird with transitions is going on there. Haven't managed to reproduce this one yet. I did notice that even though the breadcrumb component was running 3 times, onCleanup was only firing once rather than twice

Brendan Allan

StackBlitz

Solidjs - Templates (forked) - StackBlitz

Vite + solid templates

11 Replies

BrendonovichOP•10mo ago

Pinging @ryansolid since this seems like a bit of a doozey I've managed to work around the ordering problem by pushing JSX into an array instead of using portals, but the duplicate entries still exist - i'm using onCleanup to remove breadcrumbs once they're not needed, but during the transition from /users to /users/:userId while data is loading solid is forgetting to run a cleanup somewhere

ryansolid•10mo ago

I'm not surprised portals don't play nicely with transitions. Mostly that they manage their own rendering sort of outside our normal system.

BrendonovichOP•10mo ago

Oh interesting

ryansolid•10mo ago

But the breadcrumbs are not in the portals right so that's another thing

BrendonovichOP•10mo ago

Yeah i'm not using portals anymore so the ordering isn't a huge issue, but the duplicate item is still present

ryansolid•10mo ago

The thing is we can't cleanup stuff really until the transition is done So is this onCleanup in a createEffect call?

BrendonovichOP•10mo ago

Here's the approach i'm using now https://stackblitz.com/edit/solidjs-templates-cqz2d4

Brendan Allan

StackBlitz

Solidjs - Templates (forked) - StackBlitz

Vite + solid templates

BrendonovichOP•10mo ago

Just cleaning up when the component is unmounted Maybe the breadcrumb should be pushed in onMount? Nah that doesn't fix it Tbh I wouldn't be surprised if some of the transition issues i'm experiencing are bc we're using trpc and react query

ryansolid•10mo ago

Do you reproduce it here?

BrendonovichOP•10mo ago

Not the duplicate breadcrumbs, no I can't seem to make it happen yet But that approach at least alleviates the ordering issue Ok I've got this at /users/:userId

  const user = trpc.user.get.useQuery(() => ({
    tenantId: tenant.activeTenant.id,
    id: params.userId,
  }));

  return (
    <Show when={user.data}>
      {(_) => {
        console.log("inner Show running");
        onCleanup(() => console.log("inner Show cleaning up"));

  const user = trpc.user.get.useQuery(() => ({
    tenantId: tenant.activeTenant.id,
    id: params.userId,
  }));

  return (
    <Show when={user.data}>
      {(_) => {
        console.log("inner Show running");
        onCleanup(() => console.log("inner Show cleaning up"));

and /users just calls navigate() to get to /users/:userId. When performing the navigation and the user's data hasn't been loaded yet, the console looks like this

inner Show running
inner Show cleaning up
inner Show running
inner Show running

inner Show running
inner Show cleaning up
inner Show running
inner Show running

and when navigating back

(2) inner Show cleaning up

(2) inner Show cleaning up

for one i'm not sure why the show's contents are being evaulated 3 times, but i'm also not sure why 2 of the invocations are cleaning up at the same time

ryansolid•10mo ago

Interesting. It's like an additional one sticks around longer than it needs to

Gaming

Programming

Portals in nested routes not rendering in consistent order