[web] interviews/homepage: revert homepage and navbar performance improvements

apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx

@@ -3,7 +3,7 @@
 import type { InterviewsStudyList } from 'contentlayer/generated';
 import { useInView } from 'framer-motion';
 import dynamic from 'next/dynamic';
-import { memo, useRef } from 'react';
+import { useRef } from 'react';
 
 import { useUserProfile } from '~/components/global/UserProfileProvider';
 import InterviewsMarketingCompaniesSection from '~/components/interviews/marketing/InterviewsMarketingCompaniesSection';
@@ -34,9 +34,12 @@ type Props = Readonly<{
 // So that loaded state is persisted across navigations.
 let loadedBottom = false;
 
-export default function InterviewsMarketingHomePageBottomContainer(
-  props: Props,
-) {
+export default function InterviewsMarketingHomePageBottomContainer({
+  companyGuides,
+  questions,
+}: Props) {
+  const { userProfile } = useUserProfile();
+
   const loadBottomHalfMarkerEarlyRef = useRef(null);
   const showBottomHalfEarly = useInView(loadBottomHalfMarkerEarlyRef, {
     amount: 'some',
@@ -51,22 +54,6 @@ export default function InterviewsMarketingHomePageBottomContainer(
   return (
     <>
       <div ref={loadBottomHalfMarkerEarlyRef} />
-      <MemoizedInterviewsMarketingSections {...props} />
-      <div ref={loadBottomHalfMarkerRef} />
-      {loadedBottom || showBottomHalfEarly || showBottomHalf ? (
-        <MemoizedMarketingHomePageBottom />
-      ) : (
-        <div aria-hidden={true} className="h-screen" />
-      )}
-    </>
-  );
-}
-
-function InterviewsMarketingSections({ companyGuides, questions }: Props) {
-  const { userProfile } = useUserProfile();
-
-  return (
-    <>
       <InterviewsMarketingStudyPlansSection />
       <InterviewsMarketingSimulateRealInterviews />
       <InterviewsMarketingPracticeQuestionBankSection questions={questions} />
@@ -76,9 +63,12 @@ function InterviewsMarketingSections({ companyGuides, questions }: Props) {
       {!(
         userProfile?.isInterviewsPremium && userProfile?.plan === 'lifetime'
       ) && <InterviewsPricingSectionLocalizedContainer />}
+      <div ref={loadBottomHalfMarkerRef} />
+      {loadedBottom || showBottomHalfEarly || showBottomHalf ? (
+        <InterviewsMarketingHomePageBottom />
+      ) : (
+        <div aria-hidden={true} className="h-screen" />
+      )}
     </>
   );
 }
-
-const MemoizedInterviewsMarketingSections = memo(InterviewsMarketingSections);
-const MemoizedMarketingHomePageBottom = memo(InterviewsMarketingHomePageBottom);

apps/web/src/components/interviews/common/InterviewsNavbar.tsx

@@ -3,7 +3,7 @@
 import { useUser } from '@supabase/auth-helpers-react';
 import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
-import { memo, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { RiArrowRightSLine, RiMenuFill, RiStarSmileFill } from 'react-icons/ri';
 
 import gtag from '~/lib/gtag';
@@ -60,32 +60,6 @@ export default function InterviewsNavbar({
   bottomBorder = true,
   hideAdvertiseWithUsBadge,
   hideOnDesktop = false,
-}: Props) {
-  const navbarRef = useRef(null);
-  const { isSticky } = useIsSticky(navbarRef);
-  const translucent = !isSticky;
-
-  return (
-    <div
-      ref={navbarRef}
-      className={clsx(
-        'z-fixed sticky top-[var(--banner-height)]',
-        bottomBorder && ['border-b', themeBorderColor],
-        translucent ? 'backdrop-blur' : bgClassName,
-        'transition-[background-color]',
-        hideOnDesktop && 'lg:hidden',
-      )}>
-      <MemoizedInterviewsNavbarImpl
-        hideAdvertiseWithUsBadge={hideAdvertiseWithUsBadge}
-      />
-    </div>
-  );
-}
-
-function InterviewsNavbarImpl({
-  bottomBorder = true,
-  hideAdvertiseWithUsBadge,
-  hideOnDesktop = false,
 }: Props) {
   const user = useUser();
   const isLoggedIn = user != null;
@@ -93,7 +67,9 @@ function InterviewsNavbarImpl({
   const intl = useIntl();
   const isPremium = userProfile?.premium ?? false;
   const navLinksFull = useInterviewsNavLinks(isLoggedIn, isPremium);
+  const navbarRef = useRef(null);
   const pathname = usePathname();
+  const { isSticky } = useIsSticky(navbarRef);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
 
   const navItems = useInterviewsNavItems('nav');
@@ -113,12 +89,21 @@ function InterviewsNavbarImpl({
   const displayName = userProfile?.name ?? user?.email;
 
   const endAddOnItems = <InterviewsNavbarEndAddOnItems />;
+  const translucent = !isSticky;
 
   const leftLinks = navLinksFull.filter(({ position }) => position === 'start');
   const rightLinks = navLinksFull.filter(({ position }) => position === 'end');
 
   return (
-    <>
+    <div
+      ref={navbarRef}
+      className={clsx(
+        'z-fixed sticky top-[var(--banner-height)]',
+        bottomBorder && ['border-b', themeBorderColor],
+        translucent ? 'backdrop-blur' : bgClassName,
+        'transition-[background-color]',
+        hideOnDesktop && 'lg:hidden',
+      )}>
       <NavbarHeightStyles
         borderHeight={bottomBorder ? 1 : 0}
         hideOnDesktop={hideOnDesktop}
@@ -385,12 +370,10 @@ function InterviewsNavbarImpl({
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
-const MemoizedInterviewsNavbarImpl = memo(InterviewsNavbarImpl);
-
 // Below components are extracted out as a separate component to avoid re-rendering of whole the InterviewsNavbar component
 // due to useAuthSignInUp when the location changes
 function SidebarNavAuthLinks({