Next.js Discord

Discord Forum

Persist a nested ui between route like layout

Unanswered
Pacific anchoveta posted this in #help-forum
Open in Discord
Pacific anchovetaOP
How can I make the red area persist between pages like how layout.tsx works. I don't want to use position: absolute because the app hierarchy won't make sense.

export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar>
      {children} // I want the red area to be nested inside this children
    </div>
  );
}

35 Replies

Eric Burel
Doesn't sound easy
you might want to give a shot at React portals
but it's not really clear what you want to achieve
what do you call persisting between routes
why positioning is not possible here, since escaping the normal rendering workflow is kinda the point
maybe having more info about the kind of component you need would help
but not sure it's possible in a RSC
@Eric Burel what do you call persisting between routes
Pacific anchovetaOP
I mean that they won't get re-render when changing route
@Eric Burel maybe having more info about the kind of component you need would help
Pacific anchovetaOP
So my app is kinda like discord. This piece here won't re-render when you navigate between servers. When inspecting element you can see it's nested deep inside.
Eric Burel
are you sure it doesn't rerender?
ok I see what you mean
I fot this issue at a bigger scale with translated text
I wanted it to be an RSC, but text is always a leaf in the component tree
and that's not something possible in React
it wouldn't be that useful in the end
because RSC are still kinda "known" by the client component, so it doesn't reduce computatins much
but anyway back to your issue
you'd rather want to put a "memo" around the component
cause its value doesn't depend on the current route, only of its props
this prevents the component from rendering eveyrtime its own parent renders, it kinda stops the propagation of the render
the component will now only rerender if the props change but not if the parent (here the page) changes
hmm actualy it would rerender on page change I think
Pacific anchovetaOP
Oh, I never know that you can wrap a component in a memo()
https://react.dev/reference/react/memo
Eric Burel
yeah but here the problem is that navigation is a bit more than just changing props
the page is unmounted
and the next page mounts
memo will not prevent a rerender after a mount of the parent
just after rerenders of the parent
so yeah basically, I think it's a non issue
Pacific anchovetaOP
Oh right, it makes sense
Eric Burel
accept that the component rerenders, from React doc, this is ok
that's the normal behaviour in this case and not a problem
it's just that React thinks in terms of trees so you cannot really say "well actually those leaves, they are there own tree"
Pacific anchovetaOP
Alright, thanks a lot for your help