Why is a nested component within my layout.tsx rerendering? #83481

bestickley · 2025-09-05T10:46:46Z

bestickley
Sep 5, 2025

Summary

Docs state here:

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender.

but this is not my experience. I have the below files/components. I'm seeing a useEffect within a client component within a layout.tsx rerendering because one of it's props coming from it's server component (initialChats) is changing when I do router.push(...). Why? layout.tsx should no rerender, right?

// apps/layout.tsx
export default async function RootLayout({ children }: LayoutProps<"/">) {
  const cookieJar = await cookies();
  const defaultOpen = cookieJar.get("sidebar_state")?.value !== "false";
  return (
    // suppressHydrationWarning b/c of theme
    <html lang="en" suppressHydrationWarning className="h-full">
      <body
        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased h-full`}
      >
        <Toaster position="top-center" richColors />
        <Providers>
          <SidebarProvider defaultOpen={defaultOpen}>
            <AppSidebar />
            {/* min-h-screen required b/c no parents have defined height */}
            <div className="flex flex-col min-h-screen size-full">
              {/* TODO: figure out why I need border-sidebar-border */}
              <header className="flex-shrink h-16 flex items-center gap-2 border-b border-(--color-border) px-4">
                <Header />
              </header>
              <main className="flex-grow flex">{children}</main>
              <footer className="flex-shrink">
                <USWDSFooter />
              </footer>
            </div>
          </SidebarProvider>
        </Providers>
      </body>
    </html>
  );
}

// app-sidebar.tsx
export function AppSidebar() {
  return (
    <Sidebar className="border-(--color-border)">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <Link href="/chat">
                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <DatabaseZapIcon className="size-5" />
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{APP_TITLE}</span>
                  <span className="truncate text-xs">Name of Agency</span>
                </div>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Chats</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <Suspense fallback={<ChatListSkeleton />}>
                <ChatList />
              </Suspense>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <AccountMenu />
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}
```tsx
export async function ChatList() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) unauthorized();
  const initialChats = await listChats({
    userId: session.user.id,
  });

  return (
    <ChatListClient initialChats={initialChats} userId={session.user.id} />
  );
}

// chat-list-client.tsx
interface ChatListClientProps {
  initialChats: ChatTableSelect[];
  userId: string;
}

export function ChatListClient(props: ChatListClientProps) {
  const { initialChats, userId } = props;
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const { chats, setChats } = useChats();
  const [chatIsLoading, setChatIsLoading] = useState<Record<string, boolean>>(
    {},
  );
  useEffect(() => {
    setChats(initialChats);
    // TODO: figure out why this child component of layout.tsx is rerendering.
    // based off docs, it should not. this is issue when user is archiving
    // last chat
    // https://github.com/vercel/next.js/discussions/83481
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [setChats]);

  /**
   * Handles creating new chats. Remember layout.tsx (ultimate parent of this component)
   * doesn't re-render across soft navigations (`router.push`) so we must
   * manually update state on client.
   * @see https://nextjs.org/docs/app/getting-started/layouts-and-pages#creating-a-layout
   */
  function handleNewChat(ev: MouseEvent<HTMLAnchorElement>) {
    ev.preventDefault();
    const chatId = crypto.randomUUID();
    setChats((prev) => [
      {
        id: chatId,
        name: "New Chat",
        userId,
        archived: false,
        createdAt: new Date(),
        updatedAt: null,
      },
      ...prev,
    ]);
    router.push(`/chat/${chatId}`);
  }

  async function archiveChat(chatId: string) {
    // nextChatId won't be used if user archives a chat they're not viewing
    let nextChatId = "";
    const isArchivingCurrentChat = chatId === id;
    if (isArchivingCurrentChat) {
      const currentIndex = chats.findIndex((chat) => chat.id === chatId);
      // first try next chat, then try previous chat, else create new chat
      nextChatId =
        chats[currentIndex + 1]?.id ||
        chats[currentIndex - 1]?.id ||
        crypto.randomUUID();
      // TODO: why does prefetch not run for `archiveChatAction` ?
      // router.prefetch(`/chat/${nextChatId}`);
    }
    setChatIsLoading((prev) => ({ ...prev, [chatId]: true }));
    await archiveChatAction({ chatId });
    setChatIsLoading((prev) => ({ ...prev, [chatId]: false }));
    setChats((prev) => {
      const newChats = [...prev.filter((chat) => chat.id !== chatId)];
      if (!newChats.length) {
        // when user is archiving last chat, add newly generated one
        newChats.push({
          id: nextChatId,
          name: "New Chat",
          userId,
          archived: false,
          createdAt: new Date(),
          updatedAt: null,
        });
      }
      return newChats;
    });
    if (isArchivingCurrentChat) {
      router.push(`/chat/${nextChatId}`);
    }
  }
  return (
    <>
      <SidebarMenuItem>
        <SidebarMenuButton asChild>
          <Link href={`/chat`} onClick={handleNewChat}>
            <Plus />
            <span>Create Chat</span>
          </Link>
        </SidebarMenuButton>
      </SidebarMenuItem>
      {chats.map((chat) => (
        <SidebarMenuItem key={chat.id}>
          <SidebarMenuButton asChild isActive={chat.id === id}>
            <Link className="h-auto" href={`/chat/${chat.id}`}>
              <div className="line-clamp-2">{chat.name}</div>
            </Link>
          </SidebarMenuButton>
          <SidebarMenuAction className="!top-1/2 -translate-y-1/2">
            {chatIsLoading[chat.id] === true ? (
              <Loader />
            ) : (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Archive
                    className="cursor-pointer"
                    onClick={() => archiveChat(chat.id)}
                  />
                </TooltipTrigger>
                <TooltipContent side="right">Archive Chat</TooltipContent>
              </Tooltip>
            )}
            <span className="sr-only">Archive Chat</span>
          </SidebarMenuAction>
        </SidebarMenuItem>
      ))}
    </>
  );
}
}

Additional information

Next.js: 15.5.0

Example

No response

icyJoseph · 2025-09-08T12:57:28Z

icyJoseph
Sep 8, 2025
Collaborator

Mmm, there's one behavior where server actions, can lead to a layout recalculation, the three won't unmount, but the data passed from above, in the pattern you have, overrides previous data.

For example, setting cookies in a server action, or revalidatePath 🤔 but that's not in navigation -

On navigation, layouts preserve state, remain interactive, and do not rerender.

This is setting the server action, but you are experiencing this in router.push 🤔 Could you show some more pseudocode of how the router.push is invoked?

4 replies

bestickley Sep 8, 2025
Author

@icyJoseph, thank you so much for the response! I updated my initial message with all of chat-list-client.tsx code. See above archiveChat callbacks. Specifically when isArchivingCurrentChat. It calls server action so:

there's one behavior where server actions, can lead to a layout recalculation, the three won't unmount, but the data passed from above, in the pattern you have, overrides previous data.

would explain it. Where is this documented? I couldn't find it in here: https://nextjs.org/docs/app/getting-started/updating-data

icyJoseph Sep 8, 2025
Collaborator

Right, a server action by itself won't do that. Certain work within a server action can lead to reworking the route tree, revalidatePath, and...

https://nextjs.org/docs/app/guides/caching#cookies

Using cookies.set or cookies.delete in a Server Action invalidates the Router Cache to prevent routes that use cookies from becoming stale (e.g. to reflect authentication changes).

As per report/discussion, this needs better surfacing, I'll see we can do.

bestickley Sep 8, 2025
Author

So from the below text I'm supposed to know that layout.tsx's props will update?

Using cookies.set or cookies.delete in a Server Action invalidates the Router Cache to prevent routes that use cookies from becoming stale (e.g. to reflect authentication changes).

See the cookies API reference.

That's not obvious to me, but I think that's what you're alluding to when you say: "this needs better surfacing, I'll see we can do.". Thank you!

icyJoseph Sep 8, 2025
Collaborator

Yeah, perhaps it makes sense if you are studying the Caching deep dive, but it should at least be mentioned, in https://nextjs.org/docs/app/getting-started/updating-data#cookies or in the Cookies API reference

That Caching guide has also a table showing this level of detail, but yeah - this needs to be improved.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Why is a nested component within my layout.tsx rerendering? #83481

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Why is a nested component within my layout.tsx rerendering? #83481

Uh oh!

Uh oh!

bestickley Sep 5, 2025

Summary

Additional information

Example

Replies: 1 comment · 4 replies

Uh oh!

Uh oh!

icyJoseph Sep 8, 2025 Collaborator

Uh oh!

bestickley Sep 8, 2025 Author

Uh oh!

Uh oh!

icyJoseph Sep 8, 2025 Collaborator

Uh oh!

bestickley Sep 8, 2025 Author

Uh oh!

icyJoseph Sep 8, 2025 Collaborator

bestickley
Sep 5, 2025

Replies: 1 comment 4 replies

icyJoseph
Sep 8, 2025
Collaborator

bestickley Sep 8, 2025
Author

icyJoseph Sep 8, 2025
Collaborator

bestickley Sep 8, 2025
Author

icyJoseph Sep 8, 2025
Collaborator