I have a profile page using [[...tab]] routing. When navigating between routes like /username/about -> /username/specialties, the parent layout re-renders causing unwanted flashing of stable content.

File structure

src/app/
 (business)/
   [username]/
     (about)/
       layout.tsx         // Parent that re-renders 
       [[...tab]]/
         page.tsx        // Tab content, each tab content has its own path e.g. /username/about and /username/specialties

The parent layout.tsx contains ProfileHeader and StatGrid that shouldn't re-render during tab navigation

Code:

// layout.tsx
export default function AboutPage() {
  const { profile, settings } = useBusinessStore();
  
  return (
    <div>
      <ProfileHeader /> // Stable content shouldn't re-render
      <StatGrid />     // Stable content shouldn't re-render
      <ProfileTabs profile={settings} /> // Tab content switches per tab switch
    </div>
  );
}

I've found that only the project root src/app/layout.tsx stays stable during route changes, while everything inside dynamic segments re-renders.
How can I prevent the parent layout from re-rendering during route navigation without using search params?