feat: Prevent re-renders (moving SessionProvider to Root level for both app router / pages router) (#18493)

apps/web/app/layout.tsx

@@ -1,4 +1,3 @@
-import { TrpcProvider } from "app/_trpc/trpc-provider";
 import { dir } from "i18next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
@@ -11,6 +10,7 @@ import { IconSprites } from "@calcom/ui";
 import { prepareRootMetadata } from "@lib/metadata";
 
 import "../styles/globals.css";
+import { Providers } from "./providers";
 
 const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
 const calFont = localFont({
@@ -148,7 +148,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             }}
           />
         )}
-        <TrpcProvider>{children}</TrpcProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

apps/web/app/providers.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { TrpcProvider } from "app/_trpc/trpc-provider";
+import { SessionProvider } from "next-auth/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <SessionProvider>
+      <TrpcProvider>{children}</TrpcProvider>
+    </SessionProvider>
+  );
+}

apps/web/lib/app-providers-app-dir.tsx

@@ -2,7 +2,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { HydrateClient } from "app/_trpc/HydrateClient";
 import { dir } from "i18next";
 import type { Session } from "next-auth";
-import { SessionProvider, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
 import type { SSRConfig } from "next-i18next";
 import { appWithTranslation } from "next-i18next";
@@ -268,28 +268,24 @@ const AppProviders = (props: PageWrapperProps) => {
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <SessionProvider>
-        <PlainChat />
-        <CustomI18nextProvider i18n={props.i18n}>
-          <TooltipProvider>
-            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
-            <CalcomThemeProvider
-              themeBasis={props.themeBasis}
-              nonce={props.nonce}
-              isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported}
-              isBookingPage={props.isBookingPage || isBookingPage}>
-              <FeatureFlagsProvider>
-                <OrgBrandProvider>
-                  {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
-                  <CacheProvider>
-                    <MetaProvider>{props.children}</MetaProvider>
-                  </CacheProvider>
-                </OrgBrandProvider>
-              </FeatureFlagsProvider>
-            </CalcomThemeProvider>
-          </TooltipProvider>
-        </CustomI18nextProvider>
-      </SessionProvider>
+      <PlainChat />
+      <CustomI18nextProvider i18n={props.i18n}>
+        <TooltipProvider>
+          {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+          <CalcomThemeProvider
+            themeBasis={props.themeBasis}
+            nonce={props.nonce}
+            isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported}
+            isBookingPage={props.isBookingPage || isBookingPage}>
+            <FeatureFlagsProvider>
+              <OrgBrandProvider>
+                {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+                <CacheProvider>{props.children}</CacheProvider>
+              </OrgBrandProvider>
+            </FeatureFlagsProvider>
+          </CalcomThemeProvider>
+        </TooltipProvider>
+      </CustomI18nextProvider>
     </EventCollectionProvider>
   );
   const Hydrated = props.dehydratedState ? (

apps/web/lib/app-providers.tsx

@@ -1,7 +1,7 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { dir } from "i18next";
 import type { Session } from "next-auth";
-import { SessionProvider, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
 import type { SSRConfig } from "next-i18next";
 import { appWithTranslation } from "next-i18next";
@@ -296,28 +296,26 @@ const AppProviders = (props: AppPropsWithChildren) => {
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <SessionProvider session={pageProps.session ?? undefined}>
-        <PlainChat />
-        <CustomI18nextProvider {...propsWithoutNonce}>
-          <TooltipProvider>
-            <CalcomThemeProvider
-              themeBasis={props.pageProps.themeBasis}
-              nonce={props.pageProps.nonce}
-              isThemeSupported={props.Component.isThemeSupported}
-              isBookingPage={props.Component.isBookingPage || isBookingPage}
-              router={props.router}>
-              <FeatureFlagsProvider>
-                <OrgBrandProvider>
-                  {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
-                  <CacheProvider>
-                    <MetaProvider>{props.children}</MetaProvider>
-                  </CacheProvider>
-                </OrgBrandProvider>
-              </FeatureFlagsProvider>
-            </CalcomThemeProvider>
-          </TooltipProvider>
-        </CustomI18nextProvider>
-      </SessionProvider>
+      <PlainChat />
+      <CustomI18nextProvider {...propsWithoutNonce}>
+        <TooltipProvider>
+          <CalcomThemeProvider
+            themeBasis={props.pageProps.themeBasis}
+            nonce={props.pageProps.nonce}
+            isThemeSupported={props.Component.isThemeSupported}
+            isBookingPage={props.Component.isBookingPage || isBookingPage}
+            router={props.router}>
+            <FeatureFlagsProvider>
+              <OrgBrandProvider>
+                {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+                <CacheProvider>
+                  <MetaProvider>{props.children}</MetaProvider>
+                </CacheProvider>
+              </OrgBrandProvider>
+            </FeatureFlagsProvider>
+          </CalcomThemeProvider>
+        </TooltipProvider>
+      </CustomI18nextProvider>
     </EventCollectionProvider>
   );
 

apps/web/pages/_app.tsx

@@ -1,4 +1,5 @@
 import type { IncomingMessage } from "http";
+import { SessionProvider } from "next-auth/react";
 import type { AppContextType } from "next/dist/shared/lib/utils";
 import React, { useEffect } from "react";
 
@@ -17,9 +18,11 @@ function MyApp(props: AppProps) {
     }
   }, []);
 
-  const content = Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />;
-
-  return content;
+  return (
+    <SessionProvider session={pageProps.session ?? undefined}>
+      {Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />}
+    </SessionProvider>
+  );
 }
 
 declare global {