Navbar Component Re-renders Multiple Times on Dynamic Route Changes

[Kunwar-Pratap]

Summary

Description:

I'm encountering an issue with my Navbar component in Next.js where it re-renders multiple times specifically during dynamic route changes. This behavior occurs even after optimizing with React.memo and ensuring that only necessary props are used. I've logged when the Navbar component re-renders and noticed it happens more times than expected.

Key Details:

I'm using Next.js 14.2.3 [App Router] with React 18.3.1.
The Navbar component is memoized using React.memo for optimization.
I've verified dependencies in useEffect and ensured they're properly managed.
The issue specifically arises during dynamic route changes (/post/[postId], /portfolio/[portfolioId], etc.).
Despite efforts to minimize state updates and efficiently use props, the Navbar continues to re-render excessively.
I'm seeking advice on further optimizing the Navbar to reduce unnecessary re-renders during dynamic route transitions.

Additional information

"use client"

import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle } from "@nextui-org/react";
import { signOut, useSession } from "next-auth/react";
import Link from 'next/link';
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import NavBrand from "../brand/NavBrand";
import menuData from "./menuData";
import ThemeToggler from "./ThemeToggler";

const Nav: React.FC = () => {
  const pathname = usePathname();
  const router = useRouter();
  const { data: session, status } = useSession();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    if (status === "authenticated" && !session?.user) {
      router.push("/auth/login");
    }
  }, [status, session, router]);


  useEffect(() => {
    console.log('Navbar re-rendered');
  }, []);

  const handleShowNav = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const handleSignout = async () => {
    try {
      await signOut({ redirect: false });
      router.push("/auth/login");
    } catch (error) {
      console.error("Sign out error:", error);
    }
  };

  return (
    <Navbar
      isMenuOpen={isMenuOpen}
      onMenuOpenChange={setIsMenuOpen}
      isBordered
      maxWidth="2xl"
      position="sticky"
      className="backdrop-blur-lg bg-transparent backdrop-filter nav z-99999"
    >
      <NavbarContent className="sm:hidden flex gap-6" justify="start">
        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
        <NavbarBrand>
          <NavBrand />
        </NavbarBrand>
      </NavbarContent>
      <NavbarContent className="hidden sm:flex xl:gap-4 slg:gap-3 gap-2" justify="center">
        <NavbarBrand className="sm:mr-4 xl:mr-6 mr-0">
          <NavBrand />
        </NavbarBrand>
        {menuData.map((menuItem) => (
          <NavbarItem key={menuItem.id}>
            <Link
              className={`text-sm duration-150 ease-in font-medium tracking-wide xl:tracking-wider capitalize font-robotoCondensed ${pathname === menuItem.path ? 'dark:text-green-400 text-blue-600' : 'text-neutral-700 dark:text-neutral-200 dark:hover:text-green-300 hover:text-blue-500'
                }`}
              href={menuItem.path}
            >
              {menuItem.title}
            </Link>
          </NavbarItem>
        ))}
      </NavbarContent>
      <NavbarContent justify="end">
        <NavbarItem className="flex gap-6">
          <ThemeToggler />
          {status === 'authenticated' && session ? (
            <NavbarContent as="div" justify="end">
              <Dropdown placement="bottom-end">
                <DropdownTrigger>
                  <Avatar
                    isBordered
                    as="button"
                    className="transition-transform"
                    color="secondary"
                    name="Jason Hughes"
                    size="sm"
                    src={session.user?.image || undefined}
                  />
                </DropdownTrigger>
                <DropdownMenu aria-label="Profile Actions" variant="flat">
                  <DropdownItem key="profile" className="h-14 gap-2 cursor-default">
                    <p className="font-semibold">Signed in as</p>
                    <p className="font-semibold">{session.user?.name || 'User'}</p>
                  </DropdownItem>
                  <DropdownItem key="user-profile" as={Link} href={'/auth/user/profile'}>
                    Profile Card
                  </DropdownItem>
                  <DropdownItem
                    onPress={handleSignout}
                    key="logout"
                    color="danger"
                    className="mt-2"
                    as={Button}
                  >
                    Logout
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </NavbarContent>
          
          ) : (
            <Button
              href={`/auth/login?callbackUrl=${encodeURIComponent(pathname)}`}
              as={Link}
              radius="sm"
              size='sm'
              variant="flat"
              className='dark:bg-buttonWhite leading-[22px] bg-blue-600 dark:text-neutral-900 tracking-wide text-sm font-medium text-neutral-100 font-inter'
            >
              Login
              </Button>
          )}
        </NavbarItem>
      </NavbarContent>
      <NavbarMenu>
        {menuData.map((menuItem) => (
          <NavbarMenuItem key={menuItem.id}>
            <Link
              className={`text-sm duration-150 ease-in font-medium tracking-wide xl:tracking-wider capitalize font-robotoCondensed ${pathname === menuItem.path ? 'dark:text-green-400 text-blue-600' : 'text-neutral-700 dark:text-neutral-200'
                }`}
              onClick={handleShowNav}
              href={menuItem.path}
            >
              {menuItem.title}
            </Link>
          </NavbarMenuItem>
        ))}
      </NavbarMenu>
    </Navbar>
  );
};

export default React.memo(Nav);

Example

No response

[nguyenhuyquang23091]

Hey man, I wonder did you find out any solutions for this problem yet, I have been doing my personal project for this and facing with this problem, it's kind of frustrating....